DeeTools
<h2>DeeTools 工具条</h2>
<p>> <font color=#2A75CE>定义： 参数中<font color=red>*</font>表示必填项，<font color=black>{key}</font>表示对象的键，<font color=black>{value}</font>表示对象的值；类型为array或object有子属性</font></p>
<h3>Attributes</h3>
<table>
<thead>
<tr>
<th style="text-align: center;">参数</th>
<th style="text-align: center;">说明</th>
<th style="text-align: center;">类型</th>
<th style="text-align: center;">可选择</th>
<th style="text-align: center;">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">tools</td>
<td style="text-align: center;">工具条列表</td>
<td style="text-align: center;">array</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">mode</td>
<td style="text-align: center;">模式，默认只显示图标，hover显示名称，normal模式显示图标和名称</td>
<td style="text-align: center;">string</td>
<td style="text-align: center;">normal</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">collapse</td>
<td style="text-align: center;">是否超过四个，后面的折叠</td>
<td style="text-align: center;">Boolean</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">false</td>
</tr>
</tbody>
</table>
<h3>Tools Attributes</h3>
<table>
<thead>
<tr>
<th style="text-align: center;">参数</th>
<th style="text-align: center;">说明</th>
<th style="text-align: center;">类型</th>
<th style="text-align: center;">可选择</th>
<th style="text-align: center;">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">icon</td>
<td style="text-align: center;">工具图标</td>
<td style="text-align: center;">string</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">name</td>
<td style="text-align: center;">工具名称</td>
<td style="text-align: center;">string</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">type</td>
<td style="text-align: center;">工具类型，默认icon</td>
<td style="text-align: center;">string</td>
<td style="text-align: center;">upload</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">prop</td>
<td style="text-align: center;">工具属性，当type为upload时使用</td>
<td style="text-align: center;">object</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">handler</td>
<td style="text-align: center;">工具方法，当type为upload时使用</td>
<td style="text-align: center;">object</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">btnValue</td>
<td style="text-align: center;">按钮字段, 与事件tb- 后面的值对应</td>
<td style="text-align: center;">String</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
</tbody>
</table>
<h3>Events Attributes</h3>
<table>
<thead>
<tr>
<th style="text-align: center;">事件名称</th>
<th style="text-align: center;">说明</th>
<th style="text-align: center;">回调参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">tb-</td>
<td style="text-align: center;">按钮点击事件</td>
<td style="text-align: center;">prop 当前按钮属性 , e 事件对象</td>
</tr>
</tbody>
</table>
<h3>代码参考</h3>
<pre><code>&lt;template&gt;
&lt;div&gt;
&lt;h1&gt;tools的应用&lt;/h1&gt;
&lt;h5&gt;dee-tools组件中包含图标按钮、上传按钮。&lt;/h5&gt;
&lt;h2&gt;折叠的按钮组&lt;/h2&gt;
&lt;dee-tools
:tools=&quot;tools&quot;
mode=&quot;normal&quot;
:collapse=&quot;true&quot;
/&gt;
&lt;h2&gt;非折叠的按钮组&lt;/h2&gt;
&lt;dee-tools
:tools=&quot;tools&quot;
mode=&quot;normal&quot;
:collapse=&quot;false&quot;
/&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
name: 'Tools',
components: { },
data() {
return {
tools: [{
name: '上传',
type: 'upload',
icon: require('../../icons/documentcenter/uncheck.png'),
handler: {
click: () =&gt; {
console.log('dee-tools')
}
}
},
{
name: '下载',
icon: require('../../icons/documentcenter/down.png'),
handler: {
click: () =&gt; {
console.log('dee-tools')
}
}
},
{
name: '提交审阅',
icon: require('../../icons/documentcenter/shoucang.png'),
handler: {
click: () =&gt; {
console.log('dee-tools')
}
}
},
{
name: '检出并编辑',
icon: require('../../icons/documentcenter/checkout.png'),
handler: {
click: () =&gt; {
console.log('dee-tools')
}
}
},
{
name: '检入',
icon: require('../../icons/documentcenter/checkin.png'),
handler: {
click: () =&gt; {
console.log('dee-tools')
}
}
}]
}
}
}
&lt;/script&gt;
&lt;style lang=&quot;scss&quot;&gt;
&lt;/style&gt;
</code></pre>