Areas/Admin/Views/Website/Tag/Select.cshtml

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<style>
.el-tag{margin:0px 10px 10px 0px;cursor:pointer;background-color:#f4f4f5;border-color: #e9e9eb;color: #999;}
.active{background-color:#409eff;color:#fff;border: 1px solid #409eff;}
</style>
<div class="main" id="main">
    <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
        <tr>
            <td align="left">
                <h4>点击选择标签</h4>
            </td>
            <td align="right">
                <el-input size="small" style="width:200px;" v-on:blur="loadData" v-on:clear="loadData" :clearable="true" placeholder="请输入搜索关键词" v-model="searchInfo.searchKeyword"></el-input>
            </td>
        </tr>
    </table>
    <el-card class="box-card" v-show="dataList.length>0">
        <el-tag :class="{active:isSelected(item.Name)}" v-for="item in dataList" v-on:click="selectTag(item.Name)">{{item.Name}}</el-tag> 
    </el-card>
    <div v-show="dataList.length<=0" style="padding:10px">暂时没有可选择的标签！</div>
    <ui-page-panel v-model="pageInfo"  v-on:change="loadData"></ui-page-panel>
    <div class="footer-submit-bar" style="padding-left:50px">
        <el-button onclick="closeSelf()">关闭</el-button>
    </div>
</div>

<script type="text/javascript">
    //vue实例化
    var tags = parent.vue.tags.split(",");
    var vue = new Vue({
        el: "#main",
        data: {
            selectedTags:tags,
            searchInfo: { searchField: "name", searchKeyword: "" },
            pageInfo: { PageSize:100, CurrentPage: 1, PageCount: 0, RecordCount: 0 },
            dataList: [],
        },
        methods: {
            loadData: function () {
                loadData();
            },
            isSelected: function (tag)
            {
                return this.selectedTags.indexOf(tag)>=0;
            },
            selectTag:function(tag)
            {
                var _this = this;
                if (_this.selectedTags.indexOf(tag) >= 0)
                {
                    _this.selectedTags.remove(function (item) {return item == tag});
                }
                else
                {
                    _this.selectedTags.push(tag);
                }
                parent.vue.$refs.refTags.handleUpdate(_this.selectedTags);
            }
        }
    });