vue2 自定义ant design vue (组件) 的message内容 及 vue 定义公用方法流程

1 modules.js

import { Button, message } from 'ant-design-vue';

function downFile(){

  alert('下载')

}

export default {

  // 成功提示

  success(_this,content,size = 14) {

    // message.success({

    //   content : h =>

    //     _this.$createElement('span', [

    //         h('span', { style:`font-size:${size}px` },`${content}`)

    //     ]),

    //     duration:20

    //   })

      message.success(h =>

        _this.$createElement('span', [

            h('span', `${content}`),

            h(

              'a',

              {

                  style: 'margin-left:30px',  // 样式内容

                  on: {

                     click: downFile  // 点击

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Vue 是一个基于 Vue.js 的 UI 组件库,提供了丰富的 UI 组件和交互式 UI 设计,可以快速构建优秀的前端界面。如果你想要自定义 Ant Design Vue 组件并使用它们,可以按照下面的步骤进行: 1. 创建自定义组件 创建一个 Vue 组件文件,并在其中定义你的自定义组件。例如,你可以创建一个名为 MyButton 的组件,代码如下: ``` <template> <button class="my-button" @click="handleClick"> {{ buttonText }} </button> </template> <script> export default { name: 'MyButton', props: { buttonText: { type: String, default: 'Click me' } }, methods: { handleClick() { this.$emit('click'); } } }; </script> ``` 在上面的代码中,我们定义了一个名为 MyButton 的组件,它包含一个按钮和一个点击事件。组件接受一个名为 buttonText 的 prop,用于指定按钮文本的内容。 2. 注册自定义组件 在你的应用程序中注册自定义组件。你可以在全局范围内注册组件,也可以在局部范围内注册组件。例如,在全局范围内注册 MyButton 组件,代码如下: ``` import Vue from 'vue'; import MyButton from '@/components/MyButton.vue'; Vue.component('MyButton', MyButton); ``` 在上面的代码中,我们通过 import 引入了 MyButton 组件,并通过 Vue.component() 方法在全局范围内注册了该组件。 3. 使用自定义组件 在你的应用程序中使用自定义组件。你可以在模板中使用自定义组件,也可以在其他组件中使用自定义组件。例如,在模板中使用 MyButton 组件,代码如下: ``` <template> <div> <MyButton :buttonText="'Click me!'" @click="handleButtonClick" /> </div> </template> <script> export default { name: 'MyPage', methods: { handleButtonClick() { console.log('Button clicked!'); } } }; </script> ``` 在上面的代码中,我们在模板中使用了 MyButton 组件,并传递了一个名为 buttonText 的 prop,以指定按钮文本的内容。我们还添加了一个点击事件处理程序,以在按钮被点击时打印一条消息。 这就是如何在 Ant Design Vue 中创建自定义组件并使用它们的基本步骤。你可以根据你的需要进行更改和扩展,以创建你自己的自定义组件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值