update docs of Edge

yued-fe · Mar 13, 2024 · eef4270 · eef4270
1 parent 78c5824
commit eef4270
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/edge/apis.drop.html b/edge/apis.drop.html
@@ -693,7 +693,7 @@ <h4>3. 右键上下文菜单+多级数据结构</h4>
 });</pre>
             <h4>4. &lt;datalist&gt;元素实现下拉列表</h4>
             <p>可以指向一个<code>&lt;datalist&gt;</code>元素实现。代码示意：</p>
-            <pre>&lt;ui-drop class="ui-button" data-type="primary" target="t6"&gt;点击我-空option&lt;/ui-drop&gt;
+            <pre>&lt;ui-drop class="ui-button" data-type="primary" position="5-7" target="t6"&gt;点击我-空option&lt;/ui-drop&gt;
 &lt;datalist id="t6"&gt;
     &lt;option value="1"&gt;列表1&lt;/option&gt;
     &lt;option value="2"&gt;列表2&lt;/option&gt;
@@ -703,7 +703,7 @@ <h4>4. &lt;datalist&gt;元素实现下拉列表</h4>
     &lt;option value="4"&gt;其他2&lt;/option&gt;
     &lt;option value="5"&gt;&lt;mark&gt;标记&lt;/mark&gt;&lt;/option&gt;
 &lt;/datalist&gt;</pre>
-            <p>实时效果：<ui-drop class="ui-button" data-type="primary" target="t6">点击我-空option</ui-drop></p>
+            <p>实时效果：<ui-drop class="ui-button" data-type="primary" position="5-7" target="t6">点击我-空option</ui-drop></p>
             <datalist id="t6">
                 <option value="1">列表1</option>
                 <option value="2">列表2</option>
@@ -985,7 +985,21 @@ <h4>3. 轻弹框内容直接DOM显示</h4>
             <pre>dg.addEventListener('ensure', function (event) {
     console.log('点击了删除按钮');
     event.detail.drop.hide();
-});</pre>
+});</pre>   
+            <p>Vue使用示意（假设item是某循环的对象数据）：</p>
+            <pre>&lt;button
+  type="button"
+  data-type="danger" 
+  class="ui-button"
+  :is-drop="'dg' + item.id"
+&gt;
+  &lt;i class="icon-delete"&gt;&lt;/i&gt;删除
+&lt;/button&gt;
+&lt;dialog 
+  :id="'dg' + item.id"
+  data-buttons="删除"
+  @ensure="doDelete(item, $event)"
+&gt;确定删除此目标？&lt;/dialog&gt;</pre>
             <h3>Panel方法语法和参数</h3>
             <p>语法如下：</p>
             <pre>let eleDrop = new Drop(trigger).panel(options);</pre>

diff --git a/edge/apis.textarea.html b/edge/apis.textarea.html
@@ -79,8 +79,8 @@ <h4>resize拉伸-块级-嵌套</h4>
             <pre>&lt;div class="ui-textarea"&gt;&lt;textarea rows="4" <mark>resize="vertical"</mark> style="display:block;"&gt;&lt;/textarea&gt;&lt;/div&gt;</pre>
 
             <h4>只读和禁用</h4>
-            <p>文本域只读：<textarea class="ui-textarea" readonly></textarea> <textarea is="ui-textarea" readonly></textarea></p>
-            <p>文本域禁用：<textarea class="ui-textarea" disabled></textarea> <textarea is="ui-textarea" disabled></textarea></p>
+            <p>文本域只读：<textarea class="ui-textarea" readonly></textarea> <textarea is="ui-textarea" readonly>我是内容</textarea></p>
+            <p>文本域禁用：<textarea class="ui-textarea" disabled></textarea> <textarea is="ui-textarea" disabled>我是内容</textarea></p>
             <pre>&lt;textarea class="ui-textarea" <mark>readonly</mark>&gt;&lt;/textarea&gt;
 &lt;textarea is="ui-textarea" <mark>readonly</mark>&gt;&lt;/textarea&gt;</pre>
             <pre>&lt;textarea class="ui-textarea" <mark>disabled</mark>&gt;&lt;/textarea&gt;

diff --git a/edge/apis.tips.html b/edge/apis.tips.html
@@ -302,7 +302,23 @@ <h4>任意元素出现错误提示演示与代码</h4>
     var errorSpan = document.getElementById('error-span')
     errorSpan.errorTip('这里出现了错误');
 });</pre>
-            <p></p>
+
+            <h4>出错提示内滚动定位跟随</h4>
+            <div id="errorScroller" style="height: 240px; overflow: auto; border: 1px solid var(--ui-border)">
+                <div style="height: 500px; padding: 20px;">
+                    <input id="i4" class="ui-input" size="10" required data-scroller="#errorScroller">
+                    <button id="b4" class="ui-button" onclick="i4.errorTip('出错提示')"
+                        data-type="primary">出错提示内滚动定位跟随</button>
+                </div>
+            </div>
+
+            <pre>&lt;div id="errorScroller" style="height: 240px; overflow: auto; border: 1px solid var(--ui-border)"&gt;
+    &lt;div style="height: 500px; padding: 20px;"&gt;
+        &lt;input id="i4" data-scroller="#errorScroller"&gt;
+        &lt;button id="b4" onclick="i4.errorTip('出错提示')"&gt;出错提示内滚动定位跟随&lt;/button&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</pre>
+
             <h3>红色提示语法和参数</h3>
             <p>语法如下：</p>
             <pre>var myErrorTip = new ErrorTip(element, content, options);</pre>
@@ -328,7 +344,15 @@ <h3>红色提示语法和参数</h3>
                     <td>unique</td>
                     <td>Boolean</td>
                     <td>true</td>
-                    <td>是否页面是只会出现一个错误提示，默认是<code>true</code>, 永远只会有一个。此参数实际开发很少用到。</p>
+                    <td>是否页面是只会出现一个错误提示，默认是<code>true</code>, 永远只会有一个。此参数实际开发很少用到。
+                    </td>
+                </tr>
+                <tr>
+                    <td>scroller</td>
+                    <td>Element</td>
+                    <td>null</td>
+                    <td>定位元素所在的滚动容器元素，如果是页面滚动，此参数忽略，如果设置了这个参数，那么提示元素会在这个元素内滚动定位跟随。
+                        <p>此参数也可以通过<code>trigger</code>的<code>data-scroller</code>属性进行设置，值为滚动容器的选择器即可。</p>
                     </td>
                 </tr>
                 <tr>