mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 11:17:38 +08:00
remove button native modifier (#1232)
This commit is contained in:
baiyaaaaa
FuryBean
parent
967794ae3d
commit
34e01710b5
@ -54,13 +54,13 @@ Dialog pops up a dialog box, and it's quite customizable.
|
||||
:::demo Set the `v-model` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. This example explicitly changes the value of `v-model` to toggle Dialog. In addition, we also provide `open` and `close` method, which you can call to open/close the Dialog.
|
||||
|
||||
```html
|
||||
<el-button type="text" @click.native="dialogVisible = true">click to open the Dialog</el-button>
|
||||
<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
|
||||
|
||||
<el-dialog title="Tips" v-model="dialogVisible" size="tiny">
|
||||
<span>This is a message</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click.native="dialogVisible = false">Confirm</el-button>
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
@ -84,7 +84,7 @@ The content of Dialog can be anything, even a table or a form. This example show
|
||||
|
||||
```html
|
||||
<!-- Table -->
|
||||
<el-button type="text" @click.native="dialogTableVisible = true" type="text">open a Table nested Dialog</el-button>
|
||||
<el-button type="text" @click="dialogTableVisible = true" type="text">open a Table nested Dialog</el-button>
|
||||
|
||||
<el-dialog title="Shipping address" v-model="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
@ -95,7 +95,7 @@ The content of Dialog can be anything, even a table or a form. This example show
|
||||
</el-dialog>
|
||||
|
||||
<!-- Form -->
|
||||
<el-button type="text" @click.native="dialogFormVisible = true" type="text">open a Form nested Dialog</el-button>
|
||||
<el-button type="text" @click="dialogFormVisible = true" type="text">open a Form nested Dialog</el-button>
|
||||
|
||||
<el-dialog title="Shipping address" v-model="dialogFormVisible">
|
||||
<el-form :model="form">
|
||||
@ -110,8 +110,8 @@ The content of Dialog can be anything, even a table or a form. This example show
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogFormVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click.native="dialogFormVisible = false">Confirm</el-button>
|
||||
<el-button @click="dialogFormVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
@ -737,7 +737,7 @@ Form component allows you to verify your data, helping you find and correct erro
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">Delete</el-button>
|
||||
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit3">Submit</el-button>
|
||||
|
||||
@ -30,7 +30,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-button @click.native="visible = true">Button</el-button>
|
||||
<el-button @click="visible = true">Button</el-button>
|
||||
<el-dialog v-model="visible" title="Hello world">
|
||||
<p>Try Element</p>
|
||||
</el-dialog>
|
||||
|
||||
@ -160,7 +160,7 @@ Show a full screen animation while loading data.
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click.native="openFullScreen"
|
||||
@click="openFullScreen"
|
||||
v-loading.fullscreen.lock="fullscreenLoading">
|
||||
Full screen loading for 3 seconds
|
||||
</el-button>
|
||||
|
||||
@ -91,7 +91,7 @@ Alert interrupts user operation until the user confirms.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open">Click to open the Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open the Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -122,7 +122,7 @@ Confirm is used to ask users' confirmation.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open2">Click to open the Message Box</el-button>
|
||||
<el-button type="text" @click="open2">Click to open the Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -160,7 +160,7 @@ Prompt is used when user input is required.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open3">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open3">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -198,7 +198,7 @@ Can be customized to show various content.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open4">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open4">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -69,7 +69,7 @@ Displays at the top, and disappears after 3 seconds.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open">Show message</el-button>
|
||||
<el-button :plain="true" @click="open">Show message</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -91,10 +91,10 @@ Used to show the feedback of Success, Warning, Message and Error activities.
|
||||
:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open2">success</el-button>
|
||||
<el-button :plain="true" @click.native="open3">warning</el-button>
|
||||
<el-button :plain="true" @click.native="open">message</el-button>
|
||||
<el-button :plain="true" @click.native="open4">error</el-button>
|
||||
<el-button :plain="true" @click="open2">success</el-button>
|
||||
<el-button :plain="true" @click="open3">warning</el-button>
|
||||
<el-button :plain="true" @click="open">message</el-button>
|
||||
<el-button :plain="true" @click="open4">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -133,10 +133,10 @@ A close button can be added.
|
||||
:::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open5">message</el-button>
|
||||
<el-button :plain="true" @click.native="open6">success</el-button>
|
||||
<el-button :plain="true" @click.native="open7">warning</el-button>
|
||||
<el-button :plain="true" @click.native="open8">error</el-button>
|
||||
<el-button :plain="true" @click="open5">message</el-button>
|
||||
<el-button :plain="true" @click="open6">success</el-button>
|
||||
<el-button :plain="true" @click="open7">warning</el-button>
|
||||
<el-button :plain="true" @click="open8">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -65,12 +65,12 @@ Displays a global notification message at the upper right corner of the page.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open">
|
||||
@click="open">
|
||||
Closes automatically
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open2">
|
||||
@click="open2">
|
||||
Won't close automatically
|
||||
</el-button>
|
||||
</template>
|
||||
@ -107,22 +107,22 @@ We provide four types: success, warning, info and error.
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open3">
|
||||
@click="open3">
|
||||
Success
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open4">
|
||||
@click="open4">
|
||||
Warning
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open5">
|
||||
@click="open5">
|
||||
Info
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open6">
|
||||
@click="open6">
|
||||
Error
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
@ -185,8 +185,8 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
||||
v-model="visible2">
|
||||
<p>Are you sure to delete this?</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click.native="visible2 = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click.native="visible2 = false">confirm</el-button>
|
||||
<el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ Simple step bar.
|
||||
<el-step title="Step 3"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-button style="margin-top: 12px;" @click.native="next">Next step</el-button>
|
||||
<el-button style="margin-top: 12px;" @click="next">Next step</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -170,7 +170,7 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
|
||||
```html
|
||||
<template>
|
||||
<el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">
|
||||
<el-button @click.native="disabled=true">click to close tooltip function</el-button>
|
||||
<el-button @click="disabled=true">click to close tooltip function</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
|
||||
@ -75,13 +75,13 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
|
||||
:::demo 需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。本例通过显式改变`v-model`的值来打开 Dialog，此外我们还为 Dialog 实例提供了`open`和`close`方法，可以通过调用它们来打开/关闭 Dialog。
|
||||
|
||||
```html
|
||||
<el-button type="text" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
|
||||
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" v-model="dialogVisible" size="tiny">
|
||||
<span>这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
@ -104,7 +104,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
|
||||
:::demo
|
||||
```html
|
||||
<!-- Table -->
|
||||
<el-button type="text" @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
|
||||
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" v-model="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
@ -115,7 +115,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
|
||||
</el-dialog>
|
||||
|
||||
<!-- Form -->
|
||||
<el-button type="text" @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
||||
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" v-model="dialogFormVisible">
|
||||
<el-form :model="form">
|
||||
@ -130,8 +130,8 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
@ -728,7 +728,7 @@
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">删除</el-button>
|
||||
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit3">提交</el-button>
|
||||
|
||||
@ -30,7 +30,7 @@ npm i element-ui -D
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-button @click.native="visible = true">按钮</el-button>
|
||||
<el-button @click="visible = true">按钮</el-button>
|
||||
<el-dialog v-model="visible" title="Hello world">
|
||||
<p>欢迎使用 Element</p>
|
||||
</el-dialog>
|
||||
|
||||
@ -164,7 +164,7 @@
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click.native="openFullScreen"
|
||||
@click="openFullScreen"
|
||||
v-loading.fullscreen.lock="fullscreenLoading">
|
||||
显示整页加载，3 秒后消失
|
||||
</el-button>
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
:::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它默认会返回一个`Promise`对象便于进行后续操作的处理。若不确定浏览器是否支持`Promise`，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open">点击打开 Message Box</el-button>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -120,7 +120,7 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open2">点击打开 Message Box</el-button>
|
||||
<el-button type="text" @click="open2">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -157,7 +157,7 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open3">点击打开 Message Box</el-button>
|
||||
<el-button type="text" @click="open3">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -195,7 +195,7 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open4">点击打开 Message Box</el-button>
|
||||
<el-button type="text" @click="open4">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open">打开消息提示</el-button>
|
||||
<el-button :plain="true" @click="open">打开消息提示</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -91,10 +91,10 @@
|
||||
:::demo 当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置`type`字段可以定义不同的状态，默认为`info`。此时正文内容以`message`的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open4`那样直接调用。
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open2">成功</el-button>
|
||||
<el-button :plain="true" @click.native="open3">警告</el-button>
|
||||
<el-button :plain="true" @click.native="open">消息</el-button>
|
||||
<el-button :plain="true" @click.native="open4">错误</el-button>
|
||||
<el-button :plain="true" @click="open2">成功</el-button>
|
||||
<el-button :plain="true" @click="open3">警告</el-button>
|
||||
<el-button :plain="true" @click="open">消息</el-button>
|
||||
<el-button :plain="true" @click="open4">错误</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -133,10 +133,10 @@
|
||||
:::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open5">消息</el-button>
|
||||
<el-button :plain="true" @click.native="open6">成功</el-button>
|
||||
<el-button :plain="true" @click.native="open7">警告</el-button>
|
||||
<el-button :plain="true" @click.native="open8">错误</el-button>
|
||||
<el-button :plain="true" @click="open5">消息</el-button>
|
||||
<el-button :plain="true" @click="open6">成功</el-button>
|
||||
<el-button :plain="true" @click="open7">警告</el-button>
|
||||
<el-button :plain="true" @click="open8">错误</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -66,12 +66,12 @@
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open">
|
||||
@click="open">
|
||||
可自动关闭
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open2">
|
||||
@click="open2">
|
||||
不会自动关闭
|
||||
</el-button>
|
||||
</template>
|
||||
@ -108,22 +108,22 @@
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open3">
|
||||
@click="open3">
|
||||
成功
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open4">
|
||||
@click="open4">
|
||||
警告
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open5">
|
||||
@click="open5">
|
||||
消息
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open6">
|
||||
@click="open6">
|
||||
错误
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
@ -212,8 +212,8 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
||||
v-model="visible2">
|
||||
<p>这是一段内容这是一段内容确定删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click.native="visible2 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click.native="visible2 = false">确定</el-button>
|
||||
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-button style="margin-top: 12px;" @click.native="next">下一步</el-button>
|
||||
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -189,7 +189,7 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
|
||||
```html
|
||||
<template>
|
||||
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
|
||||
<el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
|
||||
<el-button @click="disabled = true">点击关闭 tooltip 功能</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user