Vue-Components+Element-Tag 示例

目录

• Vue 项目使用 Element 组件
  • Element-Tag 编辑
    • 封装 components 模板 （位置： components\tag.vue ）
    • 模板使用
    • 效果图
  • 标签展示
    • 效果图

Vue 项目使用 Element 组件

Element-Tag 编辑

封装 components 模板 （位置： components\tag.vue ）

<template>
    <div class="tag row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <el-tag
                :key="tag"
                v-for="tag in val"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
            </el-tag>
            <el-input
                class="input-new-tag input"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
        </div>
    </div>
</template>

<script>

    export default {
        components:{
            "el-tag": ()=>import(/* webpackChunkName: "element-ui/lib/date-picker" */ 'element-ui/lib/tag'),
            "el-button": ()=>import(/* webpackChunkName: "element-ui/lib/button" */ 'element-ui/lib/button'),
            "el-input": ()=>import(/* webpackChunkName: "element-ui/lib/input" */ 'element-ui/lib/input'),
        },
        name: "tag",
        props: {
            //绑定值
            value: {
                type:[String],
                default: function () {
                    return '';
                }
            },
            placeholders:{
                type:[String],
                default: function () {
                    return '';
                }
            },
            disabledFuture:{
                type:[Boolean],
                default: function () {
                    return true;
                }
            }
        },
        data () {
            return {
                val: ['标签一', '标签二', '标签三'],
                inputVisible: false,
                inputValue: '',
            };
        },
        watch:{
            value(val){
                if(this.val!=val || (typeof this.val)!=(typeof val)){
                    this.val = JSON.parse(val)==null? []:JSON.parse(val);
                }
            },
            val (val) {
                if(this.value!=val){
                    // 修改值，把修改后的值重新返回
                    this.$emit('input', JSON.stringify(val)); //修改值
                    this.$emit('change',JSON.stringify(val)); //修改值
                }
            },
            disabled(value){
                this.setDisabled(value);
            },
        },
        methods: {
            handleClose(tag) {
                this.val.splice(this.val.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.val.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            }
        },
    }
</script>

<style scoped>
.el-tag + .el-tag {
    margin-left: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>

模板使用

<edit-item key-name="tag" :options="{name: '标签',type:'text', rules:'',title:''}" :datas="props">
    <template slot="input-item">
        <tag v-model="props.data.row['tag']"
                   :disabled="!props.url">
        </tag >
    </template>
</edit-item>

// 用到的模板

<script>
    import {mapState, mapActions, mapMutations, mapGetters} from 'vuex';

    export default {
        components: {
            edit: ()=>import(/* webpackChunkName: "common_components/edit.vue" */ 'common_components/edit.vue'),
            editItem: ()=>import(/* webpackChunkName: "common_components/editItem.vue" */ 'common_components/editItem.vue'),
            tag:()=>import(/* webpackChunkName: "common_components/select2.vue" */ 'common_components/tag.vue'), //选择框异步组件
        },
        data () {
        },
        watch: {
        }
    };
</script>

效果图

标签展示

// 示例

<span v-else-if="field.type =='tag'">
    <div class="tag-group">
        <el-tag
            v-for="item in JSON.parse(array_get(row,k,''))"
            :key="item" size="mini" effect="dark"
            :type="['','success','info','warning','danger'][Math.floor(Math.random()*5+1)]">
            {{ item }}
        </el-tag>
    </div>
</span>

// 组件引用

<script>
    import {mapState, mapActions, mapMutations, mapGetters} from 'vuex';

    export default {
        components: {
            "el-tag": ()=>import(/* webpackChunkName: "element-ui/lib/date-picker" */ 'element-ui/lib/tag'),
        },
        data () {
        },
        watch: {
        }
    };
</script>

效果图