Antdesign Vue Modal box style modification

In a normal component you can modify the style using the vue2 /deep/. Selector name or vue3 :deep(. Selector name)

    :deep(.ant-input::placeholder){
        font-size: 13px;
    }
    /deep/.ant-btn-lg{
         height: 28px;
         padding: 0;
       background-color:transparent;
    }
Copy the code

<div ref='mod'> <Modal v-model:visible="visible" @ok="handleOk" :getContainer = '()=>$refs.mod' :width="width" > <template #footer> <a-button key="back" @click="handleCancel"> </a-button> <a-button key="submit" type="primary" </a-button> </template> <div class="content"> <p> Hot city </p> <div class="spancontainer"> <span v-for="(item,index ) in firstdata" key="item.index" @click="handleselect(item.id)" :class="item.ischeck? 'select':''">{{item.name}}</span> </div> </div> </Modal> </div>Copy the code

Use ref=’mod’ bindings in the outer div and use /deep/ in Modal :getContainer =’ ()=>$refs.mod’ after mounting. Of course Modal also has APIS to modify styles, such as width, etc