input 自定义指令 智能输入数字

<template>
    <div class="chose-brand">
        <Headers @seachIcon="selectType" @searchContent="getSearchContent" @goBack="$router.go(-1)"  @editEv='editHandle'></Headers>
        <Popup :select ="select" @selectType="selectType" @applicant='getApplicant' @brandType='getBrandType' :registrants="registrants"></Popup>
        <div>
            <div class="section-title">
                <span class="brandname">商标名称</span>
                <span class="type">类别</span>
                <span class="price">价格</span>
            </div>
            <scroller
            class="scroller" 
            :on-infinite="infinite"
            ref="scroller"
            >
            <div v-for="(item,index) in list" :key="index"  class="list">
                    <span>
                        <!-- 价格为空并且不是在编辑模式下 绑定上disabled -->
                        <input type="checkbox" :disabled="!showSetPrice&&!item.price" :id="'a'+index" v-model="item.checked">
                        <label :for="'a'+index" @click="dialogTip(item)"></label>
                    </span>
                    <span class="company">
                        {{item.trademark_name}}
                    </span>
                    <span class="type">
                        {{item.trademark_type}}
                    </span>
                    <span v-if="item.price" class="price">
                        {{item.price}}
                    </span>
                    <span v-else class="pricing" @click="openDialog(1,item)">
                        定价
                    </span>
            </div>
            <div style="height:200px">
            </div>
            </scroller>
        </div>
        <div class="bottom" v-show="totalCount > 0">
            <div class="left">
                <span>
                    <input type="checkbox" v-model="ischeckAll" id="all" >
                    <label for="all"></label>
                </span>
                <span class="all">全选</span>
                <span>共<span class="fc">{{totalCount}}</span>个商品</span>
            </div>
            <button v-if="showSetPrice" @click="openDialog(2)">设定价格</button>
            <span v-if="!showSetPrice" class="right" @click="publish">发布</span>
        </div>
        <!-- tip about no set price -->
        <div class="toast" v-show='toast'>
            您还没有设定价格哦
        </div>
        <!-- setPrice dialog -->
        <div class="dialog" v-show="hidMask">
            <div class="input-box">
                <input type="text"  maxlength="8"  v-model="inputPrice" v-number-only placeholder="请输入商标价格"/>
                <b class="price">(元)</b>
            </div>
            <span class="cancel" @click="hidMask=false">取消</span>
            <span class="confirm" @click="confirm">确定</span>
        </div>
        <div class="dialog-mask" v-show="hidMask"></div>
        <!-- publish dialog -->
        <div class="publish-dialog" v-show="publishMask">
            <div class="content">
                <h1>您的商标信息已成功提交</h1>
                <p>本次发布商标
                    <span>{{total}}</span>
                    个 ，我们将尽快帮您审核
                </p>
                <span  @click="goBack" class="rebackMyBrand">返回我的商标</span>
                <router-link to="/trademarkToaudit" class="watchPublishBrand">查看发布商标</router-link>
            </div>
        </div>
        <div class="dialog-mask" v-show="publishMask"></div>
    </div>
</template>

<script>
import '@/style/select-brand.scss'
import '@/style/trademark-registant.scss'
import Headers from '@/components/Header'
import Popup from '@/components/Popup'
import {registrantsGet,released} from '@/api/registrants'
import { setTimeout } from 'timers';
export default {
    data(){
        return{
            certifyType:'certifyType',
            certifyTypeNo:'certifyTypeNo',
            // 认领商标列表
            list:[],
            // 申请人列表
            registrants:[],
            // 控制设定价格的遮罩的show hide
            hidMask:false,
            //控制底部设定价格的show hide
            showSetPrice:false,
            // 设定价格是由那个事件调起来 1是定价，2是设定价格
            dialogType:'',
            // 存放定价调起弹框存放的item
            dialogItem:"",
            inputPrice:"",
            // 没有设定价格的toast
            toast:false,
            // 发布弹框遮罩
            publishMask:false,
            // 上个页面穿来的hash 和type值
            formData:{
                page:1,
                pagesize:'20',
                registrant_hash:this.$route.params.registrant_hash,
                trademark_type:"",
                keyword:""
            }, 
            // 初始化申请人，只执行一次
            initRegistrants:true,
            initScroll:false,//防止触发下拉加载函数，执行两遍alax
            emptyData:false, //主要用来判断数据为空 拉倒顶部又拉到底部 重新触发infinite事件不显示没有更多数据的问题
            select:0,  
            total:""  //发布成功后后台返回的total
        }
    },
    components:{
       Headers ,
       Popup
    },
    created(){
        // this.formData.registrant_hash = this.$route.params.registrant_hash
        this.getData()
    },
    directives: {
        numberOnly: {
            bind: function(el) {
                el.handler = function() {
                    el.value = el.value.replace(/\D+/, '')
                }
                el.addEventListener('input', el.handler)
            },
            unbind: function(el) {
                el.removeEventListener('input', el.handler)
            }
        }
    },
    computed:{
        totalCount(){
            let totalArr = this.list.filter(item=>item.checked)
            return totalArr.length
        },
        ischeckAll:{
                get(){
                    var list = this.list.filter((item)=>{
                        return item.price
                    })
                    return list.every(item=>item.checked)
                },
                set(newValue){
                    this.list.forEach(item=>{
                        item.checked=newValue
                    })
                }
            }
    },
    methods:{
        getData(){
            let form = this.formData
            registrantsGet(form).then((res)=>{
                if(this.initRegistrants){
                    this.registrants = res.subData
                    this.registrants.unshift({registrant_hash:'0',company_name:'全部申请人'})
                    this.initRegistrants = false
                }
                if(form.page == '1'){
                    this.list = res.data
                    this.list.forEach(item=>{
                        this.$set(item,"checked",false)
                    })
                    this.initScroll = true
                    this.$refs.scroller.finishInfinite()
                    if(this.list.length< 20){
                       this.emptyData = true
                        return 
                    }
                }else{
                    this.$refs.scroller.finishInfinite()
                    let resArr = res.data
                    if(resArr.length == 0){
                        this.emptyData = true
                        return
                    }
                    resArr.forEach(item=>{
                        this.$set(item,"checked",false)
                    })
                    this.list = [...this.list,...resArr]
                }
            })
        },
        // 初始化搜索字段
        initSearch(){
            this.initScroll = false
            this.emptyData = false
            this.formData.page = 1
            this.$refs.scroller.scrollTo(0,0,true)
        },
        // 接受popup组件 emit的申请人
        getApplicant(item){
            this.initSearch()
            this.formData.registrant_hash=item.registrant_hash
            this.getData()
        },
        // 接受popup组件 emit的商标类别
        getBrandType(item){
            this.initSearch()
            this.formData.trademark_type=item.id
            this.getData()
        },  
        // 接受Header组件搜索emit 的内容
        getSearchContent(val){
            this.initSearch()
            this.formData.keyword=val
            this.getData()
        },
        // 接受Header组件 点击编辑emit 的内容
        editHandle(bol){
            if(bol){
               this.list.forEach((item)=>{
                   item.checked=true
               })
            }else{
                  this.list.forEach((item)=>{
                   if(!item.price){
                       item.checked=false
                   }
               })
            }
            this.showSetPrice= bol
        },
        // 调起设定价格弹框
        openDialog(id,item){
            this.dialogItem = item
            console.log(item,"item")
            this.dialogType = id
            this.hidMask = true
        },
        confirm(){
            if(this.dialogType == '1'){
                this.dialogItem.price = this.inputPrice
            }else{
                this.list.forEach(item=>{
                    if(item.checked){
                        item.price = this.inputPrice
                    }
                })
            }
            this.inputPrice= ''
            this.hidMask = false
        },
        // 发布商标
        publish(){
            var publishList = this.list.filter(item=>{
                return item.checked
            })
            released(publishList).then((res)=>{
                this.publishMask = true
                this.total = res.total
            })
        },
        infinite: function (done) {
            if(this.emptyData){ 
                this.$refs.scroller.finishInfinite(true)
                return;
            }
            if(!this.initScroll){
                return
            }
            this.formData.page++;
            this.getData()
        },
        selectType(val){
           this.select = val
        },
        dialogTip(item){
            // 不在编辑模式下并且价格为空
            if(!item.price&&!this.showSetPrice){
                this.toast = true
                setTimeout(()=>{
                    this.toast = false
                },1500)
            }
        }
    }
}
</script>