自定义标签
<p>[TOC]</p>
<h4>安装</h4>
<p>七巧板基于 VUE （2.5）， Webpack (3.0) 请确保已具备较新的 node 环境。</p>
<h4>自定义标签控制台使用</h4>
<p>当前用法中所有参数，均为必填参数，可以设置邀请卡开始或关闭状态，设置邀请卡标题、简介、主办方、时间、背景图、活动地点及展示方式</p>
<pre><code class="language-javascript"><template>
<custom-label
v-if="isInit"
:labelData="labelData"
:commonlyUsedLabelData="commonlyUsedLabelData"
:customLabelData="customLabelData"
:labelType="labelType"
:token="token"
@addCustomLabel="addCustomLabel"
ref="customLabel"
></custom-label>
</template>
<script>
import customLabel from '../../libs/vhall-label'
export default {
props: {
},
data() {
return {
labelData: [{name: '','tag_id': 1}], // 选中标签
customLabelData: [], // 自定义标签
commonlyUsedLabelData: [], // 常用标签
labelType: {
commonLabel: {
isShow: true, // 是否显示
text: '类型标签' // 显示名称
},
userLabel: {
isShow: false,
text: '类型标签'
}
},
token: ''
}
},
created() {
},
mounted() {},
methods: {
/**
* 添加自定义标签
*/
addCustomLabel() {
// 自定义标签名称未填写
if (!this.$refs.customLabel.labelText) {
this.$msg('请填写自定义标签', 'error')
return false
}
var param = {
token: localStorage.getItem('token'),
name: this.$refs.customLabel.labelText,
type: 0 // 自定义标签类型
}
// 调取创建自定义标签接口
this.$fetch('getCreateLabel', param)
.then(res => {
let isRepeat = false
this.$refs.customLabel.labelDataInit.forEach(el => {
if (el.tag_id === res.data.tag_id) {
isRepeat = true
}
})
if (isRepeat) {
this.$refs.customLabel.labelText = ''
this.$msg('您已添加' + res.data.name + '标签', 'error')
return false
}
let data = {
name: res.data.name,
tag_id: res.data.tag_id
}
// 获取自定义标签列表并传入组件，即更改customLabelData值
this.getCustomLabelData()
this.$refs.customLabel.labelText = ''
})
.catch(() => {})
},
},
components: { customLabel }
}
</script></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">labelData</td>
<td style="text-align: left;">当前活动已选中标签</td>
<td style="text-align: left;">Array</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">commonlyUsedLabelData</td>
<td style="text-align: left;">常用标签</td>
<td style="text-align: left;">Array</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">customLabelData</td>
<td style="text-align: left;">自定义标签</td>
<td style="text-align: left;">Array</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">token</td>
<td style="text-align: left;">token</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">labelType</td>
<td style="text-align: left;">标签 tab 选择框文案</td>
<td style="text-align: left;">Object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">{commonLabel: {isShow: true,text: '公共标签' // this.t('公共标')},userLabel: {isShow: true,text: '自定义标签' // this.t('自定义标签')}}</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>自定义标签 v1.1 版本升级，优化 class 名称</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">原CLass</th>
<th style="text-align: left;">修改后Class</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">vh-label-warp</td>
<td style="text-align: left;">vh-label__warp</td>
</tr>
<tr>
<td style="text-align: left;">button-new-tag</td>
<td style="text-align: left;">vh-label__button-new-tag</td>
</tr>
<tr>
<td style="text-align: left;">vh-add-btn</td>
<td style="text-align: left;">vh-label__add-btn</td>
</tr>
<tr>
<td style="text-align: left;">vh-add-btn-icon</td>
<td style="text-align: left;">vh-label__add-icon</td>
</tr>
<tr>
<td style="text-align: left;">vhall-select</td>
<td style="text-align: left;">vh-label__select</td>
</tr>
<tr>
<td style="text-align: left;">vh-commonlyused-label-warp</td>
<td style="text-align: left;">vh-label__commonlyused-label-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-checked</td>
<td style="text-align: left;">vh-label__checked</td>
</tr>
<tr>
<td style="text-align: left;">vh-label__custom-lab</td>
<td style="text-align: left;">vh-label__custom-label-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-search-warp</td>
<td style="text-align: left;">vh-label__search-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-custom-label</td>
<td style="text-align: left;">vh-label__custom-label</td>
</tr>
</tbody>
</table>