下面是一个详细的通过Vue实现@人的功能的攻略：
步骤一：引入框架和相关组件
首先，在Vue项目中引入Vue框架和所需的组件库：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Application</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
步骤二：创建Vue实例
接下来，创建Vue实例并引入相关组件：
new Vue({
el: '#app',
data() {
return {
content: '',
userList: ['Alice', 'Bob', 'Charlie', 'Dave'],
atList: []
}
},
methods: {
handleInput(value) {
this.content = value;
this.atList = [];
if (value.charAt(value.length - 1) === '@') {
this.atList = this.userList;
}
},
handleSelect(value) {
this.content = this.content.substring(0, this.content.length - 1) + value;
this.atList = [];
}
},
template: `
<div>
<textarea v-model="content" @input="handleInput(content)"></textarea>
<el-select v-model="atList" v-if="atList.length > 0" @change="handleSelect">
<el-option v-for="user in atList" :value="user" :key="user" :label="user"></el-option>
</el-select>
<p>{{ content }}</p>
</div>
`
});
在这个Vue实例中，我们定义了如下数据与方法：
content：用来绑定输入框中的文本userList：自定义的用户列表，我们会在输入框中输入 @ 后展示这个列表atList：用来绑定 @ 列表中选中的用户handleInput方法：当在输入框中输入 @ 后，根据用户列表展示 @ 列表handleSelect方法：当在 @ 列表中选中用户后，将选中用户添加到输入框中，同时清空 @ 列表
在模板中，我们使用了 ElementUI 的输入框和选择器组件。当输入框中输入 @ 并停留在末尾时，将展示用户列表。选择用户后，将会触发 @change 事件，将用户添加到输入框中。
为了方便演示，这里只是简单地将用户列表直接放在了 Vue 实例中。在实际情况下，用户列表可能来自于后端 API 接口，或者是通过搜索实时获取。
示例一：基于Vue实现@人的功能
下面是一个在输入框中实现 @ 人功能的完整示例（示例代码基于Vue2.x）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Application</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app"></div>
<script>
new Vue({
el: '#app',
data() {
return {
content: '',
userList: ['Alice', 'Bob', 'Charlie', 'Dave'],
atList: []
}
},
methods: {
handleInput(value) {
this.content = value;
this.atList = [];
if (value.charAt(value.length - 1) === '@') {
this.atList = this.userList;
}
},
handleSelect(value) {
this.content = this.content.substring(0, this.content.length - 1) + value;
this.atList = [];
}
},
template: `
<div>
<textarea v-model="content" @input="handleInput(content)"></textarea>
<el-select v-model="atList" v-if="atList.length > 0" @change="handleSelect">
<el-option v-for="user in atList" :value="user" :key="user" :label="user"></el-option>
</el-select>
<p>{{ content }}</p>
</div>
`
});
</script>
</body>
</html>
示例二：在ElementUI中实现@人的功能
还可以基于 ElementUI 框架进行扩展，下面是示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Application</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.use(ElementUI);
new Vue({
el: '#app',
data() {
return {
content: '',
userList: ['Alice', 'Bob', 'Charlie', 'Dave'],
atList: []
}
},
methods: {
handleInput(value) {
this.content = value;
this.atList = [];
if (value.charAt(value.length - 1) === '@') {
this.atList = this.userList;
}
},
handleSelect(value) {
this.content = this.content.substring(0, this.content.length - 1) + value;
this.atList = [];
}
},
template: `
<div>
<el-input v-model="content" @input="handleInput(content)">
<template slot="prepend">@</template>
</el-input>
<el-autocomplete v-model="atList" v-if="atList.length > 0" :fetch-suggestions="querySearch" @select="handleSelect" placeholder="请输入用户名">
<template slot-scope="{item}">
<span>{{ item }}</span>
</template>
</el-autocomplete>
</div>
`,
methods: {
querySearch(queryString, cb) {
const users = this.userList;
const results = queryString ? users.filter(this.createFilter(queryString)) : users;
cb(results);
},
createFilter(queryString) {
return (user) => {
return (user.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(value) {
this.content = this.content.substring(0, this.content.length - 1) + value;
this.atList = [];
}
}
});
</script>
</body>
</html>
在这个示例中，我们使用了 el-input 和 el-autocomplete 组件来实现上述功能。在输入框中输入 @ 后，将会弹出自动完成框，并可以搜索用户列表（在示例中我们调用了 querySearch 方法来进行搜索）。同时在 ElementUI 的输入框中，我们利用了 slot 的功能，将 @ 符号插入输入框之前，以此来使界面更加友好。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何通过Vue实现@人的功能 - Python技术站
微信扫一扫 
支付宝扫一扫 