Trang chủ Khám phá Trợ giúp
Đăng nhập
packages
/
element-ui
2
0
Fork 1
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

remove button native modifier (#1232)

baiyaaaaa 8 năm trước cách đây
mục cha
967794ae3d
commit
34e01710b5
20 tập tin đã thay đổi với 66 bổ sung và 66 xóa
Split View Hiển thị tình trạng sai khác
  1. 7 7
      examples/docs/en-US/dialog.md
  2. 1 1
      examples/docs/en-US/form.md
  3. 1 1
      examples/docs/en-US/installation.md
  4. 1 1
      examples/docs/en-US/loading.md
  5. 4 4
      examples/docs/en-US/message-box.md
  6. 9 9
      examples/docs/en-US/message.md
  7. 6 6
      examples/docs/en-US/notification.md
  8. 2 2
      examples/docs/en-US/popover.md
  9. 1 1
      examples/docs/en-US/steps.md
  10. 1 1
      examples/docs/en-US/tooltip.md
  11. 7 7
      examples/docs/zh-CN/dialog.md
  12. 1 1
      examples/docs/zh-CN/form.md
  13. 1 1
      examples/docs/zh-CN/installation.md
  14. 1 1
      examples/docs/zh-CN/loading.md
  15. 4 4
      examples/docs/zh-CN/message-box.md
  16. 9 9
      examples/docs/zh-CN/message.md
  17. 6 6
      examples/docs/zh-CN/notification.md
  18. 2 2
      examples/docs/zh-CN/popover.md
  19. 1 1
      examples/docs/zh-CN/steps.md
  20. 1 1
      examples/docs/zh-CN/tooltip.md

+ 7 - 7
examples/docs/en-US/dialog.md
Xem Tập Tin 

@@ -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>

+ 1 - 1
examples/docs/en-US/form.md
Xem Tập Tin 

@@ -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>

+ 1 - 1
examples/docs/en-US/installation.md
Xem Tập Tin 

@@ -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>

+ 1 - 1
examples/docs/en-US/loading.md
Xem Tập Tin 

@@ -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>

+ 4 - 4
examples/docs/en-US/message-box.md
Xem Tập Tin 

@@ -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>

+ 9 - 9
examples/docs/en-US/message.md
Xem Tập Tin 

@@ -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>

+ 6 - 6
examples/docs/en-US/notification.md
Xem Tập Tin 

@@ -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>

+ 2 - 2
examples/docs/en-US/popover.md
Xem Tập Tin 

@@ -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>

+ 1 - 1
examples/docs/en-US/steps.md
Xem Tập Tin 

@@ -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 {

+ 1 - 1
examples/docs/en-US/tooltip.md
Xem Tập Tin 

@@ -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>

+ 7 - 7
examples/docs/zh-CN/dialog.md
Xem Tập Tin 

@@ -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>

+ 1 - 1
examples/docs/zh-CN/form.md
Xem Tập Tin 

@@ -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>

+ 1 - 1
examples/docs/zh-CN/installation.md
Xem Tập Tin 

@@ -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>

+ 1 - 1
examples/docs/zh-CN/loading.md
Xem Tập Tin 

@@ -164,7 +164,7 @@
 
 <template>
 
   <el-button
 
     type="primary"
 
-    @click.native="openFullScreen"
 
+    @click="openFullScreen"
 
     v-loading.fullscreen.lock="fullscreenLoading">
 
     显示整页加载，3 秒后消失
 
   </el-button>

+ 4 - 4
examples/docs/zh-CN/message-box.md
Xem Tập Tin 

@@ -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>

+ 9 - 9
examples/docs/zh-CN/message.md
Xem Tập Tin 

@@ -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>

+ 6 - 6
examples/docs/zh-CN/notification.md
Xem Tập Tin 

@@ -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>

+ 2 - 2
examples/docs/zh-CN/popover.md
Xem Tập Tin 

@@ -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>

+ 1 - 1
examples/docs/zh-CN/steps.md
Xem Tập Tin 

@@ -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 {

+ 1 - 1
examples/docs/zh-CN/tooltip.md
Xem Tập Tin 

@@ -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>
 
 ```