web端ant-design-vue Modal.info元件自定義icon和title使用小節

奔跑的小蚂蚁9538發表於2024-10-10
WebVue元件

　　web端ant-design-vue Modal.info元件自定義icon和title整理小節，最近在專案中用到了自定義icon和title的功能，經過測試發現，如果自定義icon title會自動換行，嘗試直接修改樣式和穿透方式都沒有效果，最後採取了一個巧妙的方式，將icon和title放在一個自定義元件內，完美解決！程式碼如下

const showModalInfo = () => {
  Modal.info({
    // icon: () => h('span', { style: { fontSize: '18px', color: '#1890ff'}, class: 'iconfont icon-info-circle-fill animation animation-info-circle' }),
    icon: () => h('div', { style: { }, class: ''},[
        h('i', { style: { fontSize: '18px', color: '#1890ff'}, class: 'iconfont icon-info-circle-fill' }),
        h('span', { class: 'ant-modal-confirm-header' },'說明')
    ]),
    okText: '關閉',
    width: 480,
    content: ()=>h('div', {}, [
      // 說明內容
      data.readBookStandardDescription? h('div', {}, [
        h('div', {style: {whiteSpace: 'pre-wrap'}}, data.readBookStandardDescription)
      ]) : h('div', {style: {whiteSpace: 'pre-wrap'}}, [
        h('p', '在校生第一學期至第五學期最多可認定4次。每人每學期達標獲得5積分，不達標0積分。\\n達標要求：每學期借書數量≥30本 且 每本借閱時間≥5天。\\n注1：同一學期借同一本書不計入有效借書。\\n注2：當學期未歸還書籍按照當前學期結束時間計算該書借閱時長。')
      ])
    ]),

    // content: h('div', {}, [
    //     // 說明內容
    //     data.readBookStandardDescription? h('div', {}, [
    //       h('p', {}, data.readBookStandardDescription)
    //     ]) : h('div', {}, [
    //       h('p', '在校生第一學期至第五學期最多可認定4次。每人每學期達標獲得5積分，不達標0積分。'),
    //       h('p', '達標要求：每學期借書數量≥30本 且 每本借閱時間≥5天。'),
    //       h('p', '注1：同一學期借同一本書不計入有效借書。'),
    //       h('p', '注2：當學期未歸還書籍按照當前學期結束時間計算該書借閱時長。')
    //     ])
    // ]),
  });
};

相關文章