精华内容
下载资源
问答
  • vue toast_TOAST Vue的UI编辑器

    千次阅读 2020-07-27 23:28:38
    vue toast toast-ui.vue编辑器 (toast-ui.vue-editor) This is Vue component wrapping TOAST UI Editor. 这是包装TOAST UI Editor的Vue组件。 View Demo 查看演示 Download Source 下载源 收集有关开源使用的...

    vue toast

    toast-ui.vue编辑器 (toast-ui.vue-editor)

    This is Vue component wrapping TOAST UI Editor.

    这是包装TOAST UI Editor的Vue组件。

    tui.editor

    收集有关开源使用的统计信息 (Collect statistics on the use of open source)

    Vue Wrapper of TOAST UI Editor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Editor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics options when declare Vue Wrapper compoent.

    TOAST UI Editor的Vue Wrapper应用Google Analytics(分析)(GA)来收集有关开源使用情况的统计信息,以便确定TOAST UI Editor在全世界的使用范围。 它也是确定项目未来走向的重要指标。 要收集location.hostname(例如>“ ui.toast.com”),其唯一目的只是测量使用情况统计信息。要禁用GA,请在声明Vue Wrapper usageStatistics时使用以下usageStatistics选项。

    var options = {
        ...
        usageStatistics: false
    }

    Or, include include tui-code-snippet.js (v1.4.0 or later) and then immediately write the options as follows:

    或者,包括include tui-code-snippet.js ( v1.4.0更高版本 ),然后立即编写以下选项:

    tui.usageStatistics = false;

    💾安装 (💾 Install)

    使用npm (Using npm)

    npm install --save @toast-ui/vue-editor

    🔨用法 (🔨 Usage)

    If you want to more details, see Tutorials 👀

    如果您想了解更多详细信息,请参见教程 👀

    加载 (Load)

    You can use Toast UI Editor for Vue as moudule format or namespace. Also you can use Single File Component (SFC of Vue). When using module format and SFC, you should load tui-editor.css, tui-editor-contents.css and codemirror.css in the script.

    您可以将Toast UI Editor for Vue用作模块格式或名称空间。 您也可以使用单一文件组件(Vue的SFC)。 使用模块格式和SFC时,应在脚本中加载tui-editor.csstui-editor-contents.csscodemirror.css

    • Using Ecmascript module

      使用Ecmascript模块

      import 'tui-editor/dist/tui-editor.css';
      import 'tui-editor/dist/tui-editor-contents.css';
      import 'codemirror/lib/codemirror.css';
      import { Editor } from '@toast-ui/vue-editor'
    • Using Commonjs module

      使用Commonjs模块

      require('tui-editor/dist/tui-editor.css');
      require('tui-editor/dist/tui-editor-contents.css');
      require('codemirror/lib/codemirror.css');
      var toastui = require('@toast-ui/vue-editor');
      var Editor = toastui.Editor;
    • Using Single File Component

      使用单个文件组件

      import 'tui-editor/dist/tui-editor.css';
      import 'tui-editor/dist/tui-editor-contents.css';
      import 'codemirror/lib/codemirror.css';
      import Editor from '@toast-ui/vue-editor/src/editor.vue'
    • Using namespace

      使用名称空间

      var Editor = toastui.Editor;

    实行 (Implement)

    First implement <editor/> in the template.

    首先在模板中实现<editor/>

    <template>
        <editor/>
    </template>

    And then add Editor to the components in your component or Vue instance like this:

    然后添加Editorcomponents在组件或VUE实例是这样的:

    import { Editor } from '@toast-ui/vue-editor'
    
    export default {
      components: {
        'editor': Editor
      }
    }

    or

    要么

    import { Editor } from '@toast-ui/vue-editor'
    new Vue({
        el: '#app',
        components: {
            'editor': Editor
        }
    });

    使用v模型 (Using v-model)

    If you use v-model, you have to declare a data for binding.

    如果使用v-model,则必须声明要绑定的data

    In the example below, editorText is binding to the text of the editor.

    在下面的示例中, editorText绑定到编辑器的文本。

    <template>
        <editor v-model="editorText"/>
    </template>
    <script>
    import { Editor } from '@toast-ui/vue-editor'
    
    export default {
      components: {
        'editor': Editor
      },
      data() {
          return {
              editorText: ''
          }
      }
    }
    </script>

    道具 (Props)

    NameTypeDefaultDescription
    valueString''This prop can change content of the editor. If you using v-model, don't use it.
    optionsObjectfollowing defaultOptionsOptions of tui.editor. This is for initailize tui.editor.
    heightString'300px'This prop can control the height of the editor.
    previewStyleString'tab'This prop can change preview style of the editor. (tab or vertical)
    modeString'markdown'This prop can change mode of the editor. (markdownor wysiwyg)
    htmlString-If you want change content of the editor using html format, use this prop.
    visibleBooleantrueThis prop can control visible of the eiditor.
    名称 类型 默认 描述
    '' 该道具可以改变编辑器的内容。 如果您使用v-model ,请不要使用它
    选项 目的 以下defaultOptions tui.editor的选项。 这是为了使tui.editor无效。
    高度 '300px' 该道具可以控制编辑器的高度。
    PreviewStyle '标签' 该道具可以改变编辑器的预览风格。 ( tabvertical )
    模式 '降价' 该道具可以改变编辑器的模式。 ( markdownwysiwyg )
    html -- 如果要使用html格式更改编辑器的内容,请使用此道具。
    可见 布尔型 真正 该道具可以控制看守者。
    const defaultOptions = {
        minHeight: '200px',
        language: 'en_US',
        useCommandShortcut: true,
        useDefaultHTMLSanitizer: true,
        usageStatistics: true,
        hideModeSwitch: false,
        toolbarItems: [
            'heading',
            'bold',
            'italic',
            'strike',
            'divider',
            'hr',
            'quote',
            'divider',
            'ul',
            'ol',
            'task',
            'indent',
            'outdent',
            'divider',
            'table',
            'image',
            'link',
            'divider',
            'code',
            'codeblock'
        ]
    };

    事件 (Event)

    • load : It would be emitted when editor fully load

      load:编辑器完全加载时会发出

    • change : It would be emitted when content changed

      change:内容更改时会发出

    • stateChange : It would be emitted when format change by cursor position

      stateChange:通过光标位置更改格式时将发出

    • focus : It would be emitted when editor get focus

      focus:当编辑器获得焦点时将发出

    • blur : It would be emitted when editor loose focus

      模糊:当编辑器失去焦点时会发出

    方法 (Method)

    If you want to more manipulate the Editor, you can use invoke method to call the method of tui.editor. For more information of method, see method of tui.editor.

    如果要更多地操纵编辑器,则可以使用invoke方法来调用tui.editor方法。 有关method的更多信息,请参见tui.editor的method

    First, you need to assign ref attribute of <editor/> and then you can use invoke method through this.$refs like this:

    首先,您需要分配<editor/> ref属性,然后可以通过this.$refs使用invoke方法,如下所示:

    <template>
        <editor ref="tuiEditor"/>
    </template>
    <script>
    import { Editor } from '@toast-ui/vue-editor'
    
    export default {
        components: {
            'editor': Editor
        },
        methods: {
            scroll() {
                this.$refs.tuiEditor.invoke('scrollTop', 10);
            },
            moveTop() {
                this.$refs.tuiEditor.invoke('moveCursorToStart');
            },
            getHtml() {
                let html = this.$refs.tuiEditor.invoke('getHtml');
            }
        }
    };
    </script>

    🔧拉取步骤 (🔧 Pull Request Steps)

    TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

    TOAST UI产品是开源的,因此您可以在解决问题后创建提取请求(PR)。 运行npm脚本并通过以下过程开发自己。

    建立 (Setup)

    Fork develop branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check to haveany errors.

    develop分支develop到您的个人存储库中。 克隆到本地计算机。 安装节点模块。 在开始开发之前,您应该检查是否有任何错误。

    $ git clone https://github.com/{your-personal-repo}/[[repo name]].git
    $ cd [[repo name]]
    $ npm install

    翻译自: https://vuejsexamples.com/toast-ui-editor-for-vue/

    vue toast

    展开全文
  • vue toast Vue TOAST UI日历 (Vue TOAST UI Calendar) A Vue.js wrapper for TOAST UI Calendar. TOAST UI日历的Vue.js包装器。 安装 (Installation) npm install --save tui-calendar @lkmadushan/vue-...

    vue toast

    Vue TOAST UI日历 (Vue TOAST UI Calendar)

    A Vue.js wrapper for TOAST UI Calendar.

    TOAST UI日历的Vue.js包装器。

    安装 (Installation)

    npm install --save tui-calendar @lkmadushan/vue-tuicalendar

    用法 (Usage)

    (Example)

    Try out this Code Sandbox

    试用此代码沙箱

    捆绑器(Webpack,汇总) (Bundler (Webpack, Rollup))

    import Vue from 'vue'
    import VueTuicalendar from '@lkmadushan/vue-tuicalendar'
    // You need a specific loader for CSS files like https://github.com/webpack/css-loader
    import 'tui-calendar/dist/tui-calendar.min.css'
    
    Vue.use(VueTuicalendar)
    
    // or
    
    import { VueTuicalendar } from '@lkmadushan/vue-tuicalendar'
    <template>
      <vue-tuicalendar
        ref="calendar"
        :options="options"
        :schedules="schedules"
        @after-render-schedule="handler"
        @before-render-schedule="handler"
        @click-schedule="handler"
      >
      </vue-tuicalendar>
    </template>
    
    ...
    <script>
    ...
      data() {
        return {
          schedules: [
            {
              id: "1",
              calendarId: "1",
              title: "A schedule",
              category: "time",
              dueDateClass: "",
              start: "2018-05-22T22:30:00+09:00",
              end: "2018-05-23T02:30:00+09:00"
            },
            {
              id: "2",
              calendarId: "1",
              title: "Another schedule",
              category: "time",
              dueDateClass: "",
              start: "2018-05-23T17:30:00+09:00",
              end: "2018-05-24T17:31:00+09:00",
              isReadOnly: true
            }
          ]
        }
      }
      
      methods: {
        mounted() {
          this.$refs.calendar.fireMethod('clear');
          this.$refs.calendar.fireMethod('getElement');
          this.$refs.calendar.fireMethod('changeView', 'month', true);
          
          this.$refs.calendar.registerEvent('beforeDeleteSchedule', (event) {
            // do stuff here
          })
        }
      }
    ...
    </script>

    More options can be found at https://nhnent.github.io/tui.calendar/latest/Calendar.html

    更多选项可以在https://nhnent.github.io/tui.calendar/latest/Calendar.html找到

    浏览器 (Browser)

    <!-- Include after Vue -->
    <!-- Local files -->
    <script src="vue-tuicalendar/dist/@lkmadushan/vue-tuicalendar.js"></script>
    
    <!-- From CDN -->
    <script src="https://unpkg.com/@lkmadushan/vue-tuicalendar"></script>

    发展历程 (Development)

    启动视觉测试 (Launch visual tests)

    npm run dev

    发起因果报应 (Launch Karma with coverage)

    npm run dev:coverage

    建立 (Build)

    Bundle the js and css of to the dist folder:

    将的js和CSS捆绑到dist文件夹:

    npm run build

    出版 (Publishing)

    The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

    prepublish挂钩将确保在发布之前创建dist文件。 这样,您无需在存储库中提交它们。

    # Bump the version first
    # It'll also commit it and create a tag
    npm version
    # Push the bumped package and tags
    git push --follow-tags
    # Ship it 🚀
    npm publish

    翻译自: https://vuejsexamples.com/a-vue-js-wrapper-for-toast-ui-calendar/

    vue toast

    展开全文
  • vue toast组件 cxlt-vue2-toastr (cxlt-vue2-toastr) cxlt-vue2-toastr is a non-blocking notifications for Vue2 ,Based on toastr stylings and design together with animate.css animation effects. cxlt-vue...

    vue toast组件

    cxlt-vue2-toastr (cxlt-vue2-toastr)

    cxlt-vue2-toastr is a non-blocking notifications for Vue2 ,Based on toastr stylings and design together with animate.css animation effects.

    cxlt-vue2-toastr是Vue2的非阻塞通知,基于toastr的样式和设计以及animate.css动画效果。

    建立 (Setup)

    Using npm

    使用npm

    npm install cxlt-vue2-toastr --save

    Or using yarn

    或使用纱

    yarn add cxlt-vue2-toastr

    用法 (Usage)

    导入组件 (Import Component)

    import CxltToastr from 'cxlt-vue2-toastr'
    
    Vue.use(CxltToastr)

    Optional Global configuration options

    可选的全局配置选项

    var toastrConfigs = {
        position: 'top right',
        showDuration: 2000
    }
    Vue.use(CxltToastr, toastrConfigs)

    You can use All options mentioned in below options table except color option, instead, you should use below additional four color options in global configuration.

    您可以使用以下选项表中提到的所有选项( 颜色选项除外),而应在全局配置中使用下面的其他四个颜色选项。

    OptionTypeDescription
    successColorStringbackground color for success notificatoin
    infoColorStringbackground color for info notificatoin
    warningColorStringbackground color for warning notificatoin
    errorColorStringbackground color for error notificatoin
    选项 类型 描述
    successColor 成功通知的背景色
    infoColor 信息通知的背景色
    warningColor 警告通知的背景颜色
    errorColor 错误通知的背景色

    Please note: if you pass color option in your notification instance, it will override above global color options.

    请注意:如果您在通知实例中传递了color选项,它将覆盖全局颜色选项之上。

    导入样式文件 (Import styling files)

    import 'cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css'

    Or use it in .vue with style tag

    或者在带有样式标签的.vue中使用它

    <style src="cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css"></style>

    通话通知实例 (Call Notification Instance)

    this.$toast.success({
        title:'',
        message:''
    })

    cxlt-vue2-toastr support below functions

    cxlt-vue2-toastr支持以下功能

    functions
    success
    info
    warn
    error
    removeAll
    功能
    成功
    信息
    警告
    错误
    移除所有

    You need to pass an option object which can have below values, used for controlling title, content, position etc.

    您需要传递一个选项对象,该对象可以具有以下值,用于控制标题,内容,位置等。

    选项 (options)

    OptionTypeDescription
    titleStringTitle for notification
    messageStringContent for notification
    closeButtonBooleanNeed close button or not, default as false
    progressBarBooleandefault as false
    typeStringType for notification,default as success
    positionStringPosition for notification,default as top right
    iconStringCustom Icon
    showMethodStringAnimation class name for shown,default as fadeIn
    hideMethodStringAnimation class name for hide,default as fadeOut
    showDurationNumberDuration of show animation,unit as ms,default as 1000
    hideDurationNumberDuration of hide animation,unit as ms,default as 1000
    delayNumberDelay of animation,unit as ms,default as 0, means no delay
    timeOutNumberDuration of notification displaying,Unit as ms,default as 1500
    colorStringbackground color of notification
    选项 类型 描述
    标题 通知标题
    信息 通知内容
    closeButton 布尔型 是否需要关闭按钮,默认为false
    进度条 布尔型 默认为假
    类型 通知类型,默认为成功
    位置 通知位置,默认为右上
    图标 自定义图标
    showMethod 显示的动画类名称,默认为fadeIn
    hideMethod hide的动画类名称,默认为fadeOut
    showDuration 放映动画的持续时间,单位为ms ,默认为1000
    hideDuration 隐藏动画的持续时间,单位为ms ,默认为1000
    延迟 动画延迟,单位为ms ,默认为0 ,表示无延迟
    超时 通知显示的持续时间,单位为ms ,默认为1500
    颜色 通知的背景色

    类型 (type)

    • success

      success

    • info

      info

    • warning

      warning

    • error

      error

    位置 (position)

    • top right

      top right

    • bottom right

      bottom right

    • bottom left

      bottom left

    • top left

      top left

    • top center

      top center

    • bottom center

      bottom center

    • top full width

      top full width

    • bottom full width

      bottom full width

    图标 (icon)

    Any valid image url.

    任何有效的图片网址。

    showMethod (showMethod)

    • bounce

      bounce

    • flash

      flash

    • pulse

      pulse

    • rubberBand

      rubberBand

    • shake

      shake

    • headShake

      headShake

    • swing

      swing

    • tada

      tada

    • wobble

      wobble

    • jello

      jello

    • bounceIn

      bounceIn

    • bounceInDown

      bounceInDown

    • bounceInLeft

      bounceInLeft

    • bounceInRight

      bounceInRight

    • bounceInUp

      bounceInUp

    • fadeIn

      fadeIn

    • fadeInDown

      fadeInDown

    • fadeInDownBig

      fadeInDownBig

    • fadeInLeft

      fadeInLeft

    • fadeInLeftBig

      fadeInLeftBig

    • fadeInRight

      fadeInRight

    • fadeInRightBig

      fadeInRightBig

    • fadeInUp

      fadeInUp

    • fadeInUpBig

      fadeInUpBig

    • flipInX

      flipInX

    • flipInY

      flipInY

    • lightSpeedIn

      lightSpeedIn

    • lightSpeedOut

      lightSpeedOut

    • rotateIn

      rotateIn

    • rotateInDownLeft

      rotateInDownLeft

    • rotateInDownRight

      rotateInDownRight

    • rotateInUpLeft

      rotateInUpLeft

    • rotateInUpRight

      rotateInUpRight

    • hinge

      hinge

    • rollIn

      rollIn

    • zoomIn

      zoomIn

    • zoomInDown

      zoomInDown

    • zoomInLeft

      zoomInLeft

    • zoomInRight

      zoomInRight

    • zoomInUp

      zoomInUp

    • slideInDown

      slideInDown

    • slideInLeft

      slideInLeft

    • slideInRight

      slideInRight

    • slideInUp

      slideInUp

    hideMethod (hideMethod)

    • bounce

      bounce

    • flash

      flash

    • pulse

      pulse

    • rubberBand

      rubberBand

    • shake

      shake

    • headShake

      headShake

    • swing

      swing

    • tada

      tada

    • wobble

      wobble

    • jello

      jello

    • bounceOut

      bounceOut

    • bounceOutDown

      bounceOutDown

    • bounceOutLeft

      bounceOutLeft

    • bounceOutRight

      bounceOutRight

    • bounceOutUp

      bounceOutUp

    • fadeOut

      fadeOut

    • fadeOutDown

      fadeOutDown

    • fadeOutDownBig

      fadeOutDownBig

    • fadeOutLeft

      fadeOutLeft

    • fadeOutLeftBig

      fadeOutLeftBig

    • fadeOutRight

      fadeOutRight

    • fadeOutRightBig

      fadeOutRightBig

    • fadeOutUp

      fadeOutUp

    • fadeOutUpBig

      fadeOutUpBig

    • flipOutX

      flipOutX

    • flipOutY

      flipOutY

    • rotateOut

      rotateOut

    • rotateOutDownLeft

      rotateOutDownLeft

    • rotateOutDownRight

      rotateOutDownRight

    • rotateOutUpLeft

      rotateOutUpLeft

    • rotateOutUpRight

      rotateOutUpRight

    • rollOut

      rollOut

    • zoomOut

      zoomOut

    • zoomOutDown

      zoomOutDown

    • zoomOutLeft

      zoomOutLeft

    • zoomOutRight

      zoomOutRight

    • zoomOutUp

      zoomOutUp

    • slideOutDown

      slideOutDown

    • slideOutLeft

      slideOutLeft

    • slideOutRight

      slideOutRight

    • slideOutUp

      slideOutUp

    运行这个项目 (Run this project)

    fork the repository,then follow below commands

    分叉存储库,然后遵循以下命令

    git clone xxx
    cd cxlt-vue2-toastr
    yarn
    npm run dev

    翻译自: https://vuejsexamples.com/toast-notification-component-for-vue2/

    vue toast组件

    展开全文
  • 具有 Snackbar组件的队列支持的基本Vue Toast服务。 灵感来自 安装 npm install vuetify-toast-snackbar 演示版 演示: : 用法 捆绑器(Webpack,汇总) import VuetifyToast from 'vuetify-toast-snackbar' Vue ....
  • Vue Toast(吐司)实现

    2021-01-04 19:36:45
    Vue Toast(吐司)实现 前言 你好,最近刚在学习前端知识,在此记录一下自己的 Vue Toast 学习过程,并借此机会进行回顾,如有错误之处,请批评指出,谢谢! 我个人将其分为3步: 1. 制作 ; 2. 安装; 3. 挂载; 制作...

    Vue Toast(吐司)实现

    前言

    你好,最近刚在学习前端知识,在此记录一下自己的 Vue Toast 学习过程,并借此机会进行回顾,如有错误之处,请批评指出,谢谢!
    我个人将其分为3步: 1. 制作 ; 2. 安装; 3. 挂载

    制作Toast

    新建文件夹toast,并建立Toast.vue。

    <template>
        <div id="msg" v-show="show">
            <div>{{msg}}</div>
        </div>
    </template>
    <script>
        export default {
            name:'Toast',
            data(){
                return {
                    msg:'',
                    show:  false
                }
            },
            methods:{
                showToast(msg,delay=1000){
                    this.msg = msg
                    this.show = true
                    /*显示delay时间,后消失*/
                    setTimeout(()=>{
                        this.msg = ''
                        this.show = false
                    }, delay)
                }
            }
        }
        
    </script>
    <style scoped>
        #msg div{
            left: 50%;
            top: 50%;
            position: absolute;
            font-size: 20px;
            color: white;
            background-color: deeppink;
            transform: translate(-50%,-50%);
            /* transform:相对自身的宽度和高度进行移动 */
            z-index: 999;
        }
    </style>
    

    安装

    在main.js中安装toast。

    import toast from '----'
    /*----:填写toast文件夹路径*/
    Vue.use(toast)
    /*Vue.use方法自动跳转到index.js中执行obj.install方法*/
    

    挂载

    在制作部分中的toast文件夹下,新建index.js文件。

    import Toast from './Toast'
    
    const obj = {}
    
    obj.install = function(Vue){
    
        // 1.组件构造器
        const toastConstructor = Vue.extend(Toast)
    
        // 2.组件对象
        const toast = new toastConstructor()
    
        // 3.挂载创建div节点
        toast.$mount(document.createElement('div'))
    
        // 4.body上增加toast
        document.body.appendChild(toast.$el)
        
        Vue.prototype.$toast = toast
    }
    
    export default obj
    
    展开全文
  • snackbar 使用 Vuetify吐司...Basic Vue toast service that uses Vuetify Snackbar component. 使用Vuetify Snackbar组件的基本Vue Toast服务。 View Demo 查看演示 Download Source 下载源 安装 (Installati...
  • 手撸一个VUE toast全局可安装组件安装vue vue elementUi预览代码结构src/main.vueindex.js组件安装组件调用 安装vue vue elementUi 不用elementui 可自定下载iconfont来替换图标 预览 懂VUE的都懂 再次不赘述 代码...
  • A mobile toast plugin for vue2.
  • vue Toast 弹窗

    2019-10-05 00:17:15
    创建一个message.vue组件 <template> <div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'"> <i :class="iconState ?'success':'wrong'"></i> ...
  • vue toast 实现步骤

    2019-07-19 08:25:02
  • 先创建一个toast文件,里面再创建一个toast.vue和一个index.js toast.vue <template> <div class="toast" v-show="isShow"> <div>{{message}}</div> </div> </template> <...
  • 哈喽大家好啊,又有一周不见了呢,这周我们要讲的是个内容一个是上上周讲到的VueBusevent的组件vue-happy-bus的源码解读另外就是手撸一个toast提示框组件。 vue-happy-bus源码解读 如果没有看过vue-happy-bus使用...
  • import { VueToast } from '@kashio/vue-toast' ; import '@kashio/vue-toast/dist/index.css' ; Vue . use ( VueToast ) ; Vue . maxToasts = 10 ; const vm = new Vue ( { el : '#app' , render : h => h ( '...
  • import VueToast from 'vue-toast-notification' ; // Import one of the available themes //import 'vue-toast-notification/dist/theme-default.css'; import 'vue-toast-notification/dist/theme-sugar.css' ; ...
  • vue 插件 toast Vue简易吐司 (Vue-Easy-Toast) A toast plugin for vue/vue2. vue / vue2的Toast插件。 Note: Since 1.x.x, only Vue 2 is supported. For Vue 1 users please stick to version 0.x.x 注意:从1....
  • 用于vue2的移动Toast插件。 用法 安装: npm install vue2-toast -S 进口: import 'vue2-toast/lib/toast.css' ; import Toast from 'vue2-toast' ; Vue . use ( Toast ) ; 要么 import 'vue2-toast/lib/toast....
  • vue 插件 toast vue2-烤面包 (vue2-toast) A mobile toast plugin for vue2. vue2的移动Toast插件。 View demo 查看演示 Download Source 下载源 用法 (Usage) Install: 安装: npm install vue2-toast -S ...
  • 制作npm插件vue-toast-m实例练习(消息弹窗)...import VueToast from 'vue-toast-demo-cc' Vue.use(VueToast) this.$toast.show("hello,toast") //or this.$toast.show("hello,toast",{ duration:30...
  • VUE 自定义插件Toast

    2019-04-02 17:12:11
    toast.js import ToastTemplate from './ToastTemplate' let Toast = {} Toast.install = function(Vue,params={}... const VueToast = Vue.extend(ToastTemplate) //创建模板 let toast = null Vue.prototype....
  • vue 自定义插件 toast

    2020-09-27 17:06:05
    文章目录toast/Toast.vuetoast/index.js 核心mian.js使用 toast/Toast.vue <template> <div class="toast" v-show="isShow"> {{text}} </div> </template> <script> export ...
  • 制作npm插件vue-toast-m...import VueToast from 'vue-toast-demo-cc' Vue.use(VueToast) this.$toast.show("hello,toast") //or this.$toast.show("hello,toast",{ duration:3000 }) /...
  • vue自定义toast插件

    2020-03-24 19:02:01
    创建配置文件index.js 和Toast.vue模板 import Toast from './Toast' const obj = {} obj.install = function (Vue) { // console.log('执行toast函数',Vue); // Vue.prototype.$toast = 对象 将$toast 加入到vue...
  • 本文实例为大家分享了vue toast弹框全局调用示例,供大家参考,具体内容如下 1.首选新建一个toast.vue模板文件: <div class=alert-mask v-show=isShowMask></div> {{text}}
  • 基于VueToast提示框

    2021-05-27 15:31:42
    vue 类似安卓 IOS的toast 提示框 比如 登录成功后就可以使用
  • Notice注意:不建议使用此存储库TOAST UI Grid Vue Wrapper已与TOAST UI Grid存储库分开进行管理。 :warning:通知的结果:不建议使用此存储库TOAST UI Grid Vue Wrapper已与TOAST UI Grid存储库分开进行管理。 由于...
  • 主要介绍了Vue自定义toast组件的相关资料,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,588
精华内容 3,435
关键字:

vue的toast

vue 订阅