slim_Vuejs的Slim对话框

slim

超薄对话 (v-slim-dialog)

Slim Dialog for Vuejs.

Vuejs的Slim对话框。

安装 (Installation)

yarn add v-slim-dialog
# Or using npm
npm install v-slim-dialog

用法 (Usage)

import Vue from 'vue'

import 'v-slim-dialog/dist/v-slim-dialog.css'
import SlimDialog from 'v-slim-dialog'

Vue.use(SlimDialog)

选项参数 (Options params)

Name	Type	Required	Default value	Info
title	String	No		Title of modal
okLabel	String	No	OK	Label of button OK
cancelLabel	String	No	Cancel	Label of button cancel
size	String('sm'or'lg')	No		Size of modal
prompt	Object	No		Hash for prompt {value: '', component: VueComponent}

名称	类型	需要	默认值	信息
标题	串	没有		模态标题
okLabel	串	没有	好	按钮标签确定
cancelLabel	串	没有	取消	按钮标签取消
尺寸	字符串('sm'或'lg')	没有		模态尺寸
提示	目的	没有		提示{value：``，component：VueComponent}的哈希值

在你的组件中 (In your component)

警报 (alert)

//...
methods: {
  /**
   * @param String message
   * @param Object options default { title, okLabel = 'OK', size }
   */
  showAlert() {
    const options = {title: 'Info', size: 'sm'}
    this.$dialogs.alert('Your message', options)
    .then(res => {
      console.log(res) // {ok: true|false|undefined}
    })
  }
}
//...

确认 (confirm)

//...
methods: {
  /**
   * @param String message
   * @param Object options default { title, cancelLabel = 'Cancel', okLabel = 'OK', size }
   */
  showConfirm() {
    const options = {title: 'Confirm?', cancelLabel: 'No'}
    this.$dialogs.confirm('Your message!', options)
    .then(res => {
      console.log(res) // {ok: true|false|undefined}
    })
  }

}
//...

提示 (prompt)

//...
methods: {
  /**
   * @param String message
   * @param Object options default { title, okLabel = 'OK', size, prompt }
   */
  showPrompt() {
    const options = {title: 'Continue?', okLabel: 'Continue'}
    this.$dialogs.prompt('Your message!', options)
    .then(res => {
      console.log(res) // {value: 'user input', ok: true|false|undefined}
    })

    // with custom input prompt
    const options = {title: 'Continue?', prompt: {component: 'cpf-cnpj'}}
    this.$dialogs.prompt('Your message!', options)
    .then(res => {
      console.log(res) // {value: 'user input', ok: true|false|undefined}
    })

    // or
    import YourComponent from './YourComponent'
    const options = {title: 'Continue?', prompt: {component: YourComponent}}
    this.$dialogs.prompt('Your message!', options)
    .then(res => {
      console.log(res) // {value: 'user input', ok: true|false|undefined}
    })

  }

}
//...

示例自定义提示组件 (Sample custom prompt Component)

This is the default component if you do not report

如果您不报告，则这是默认组件

<template>
  <input v-model='model'>
</template>

<script>
export default {
  props: {
    value: [Number, String]
  },

  computed: {
    model: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v)
      }
    }
  },
  mounted() {
    this.$el.focus()
  }
}
</script>

发展历程 (Development)

# install dependencies
yarn install

# build with minification
yarn release

# publish
bin/publish

翻译自: https://vuejsexamples.com/slim-dialog-for-vuejs/

slim