atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://vikingleo.github.io</id>
    <title>笑望云舒</title>
    <updated>2021-08-31T02:12:20.093Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://vikingleo.github.io"/>
    <link rel="self" href="https://vikingleo.github.io/atom.xml"/>
    <logo>https://vikingleo.github.io/images/avatar.png</logo>
    <icon>https://vikingleo.github.io/favicon.ico</icon>
    <rights>All rights reserved 2021, 笑望云舒</rights>
    <entry>
        <title type="html"><![CDATA[前端js工具函数]]></title>
        <id>https://vikingleo.github.io/qian-duan-js-gong-ju-han-shu/</id>
        <link href="https://vikingleo.github.io/qian-duan-js-gong-ju-han-shu/">
        </link>
        <updated>2021-01-06T09:18:49.000Z</updated>
        <content type="html"><![CDATA[<h2 id="小程序-uniapp的picker多列数据源处理">小程序、uniapp的picker多列数据源处理</h2>
<pre><code class="language-javascript">/**
 * 返回处理后的picker数据源
 * @param sourceData    {Array} 原始无限级数据
 * @param renderArray   {Array} 产生的数据，如果有，如果没有，第一元素就是sourceData
 * @param indexValue    {Array} 当前值，格式：[0,0,0]，其中元素为对应列已选项目的索引
 * @param childrenFiled {String} 源数据用于存放子项的字段名，
 * @returns {Promise&lt;unknown&gt;} false 或者 Array
 */
const districtRangeData = (sourceData, renderArray, indexValue, childrenFiled) =&gt; {
	return new Promise(resolve =&gt; {

		if (!sourceData || !sourceData.length) {
			resolve(false)
		}
		if (!renderArray || renderArray.length) {
			renderArray = [sourceData]
		}
		for (let i in indexValue) {
			if (+i &gt; 0) {
				let item = renderArray[i - 1][indexValue[+i - 1]][childrenFiled]
				renderArray.splice(+i, 1, item)
			}
			if (+i === indexValue.length - 1) {
				resolve(renderArray)
			}
		}
	})
}
</code></pre>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[ju-components-uni]]></title>
        <id>https://vikingleo.github.io/ju-components-uni/</id>
        <link href="https://vikingleo.github.io/ju-components-uni/">
        </link>
        <updated>2021-01-06T08:38:17.000Z</updated>
        <content type="html"><![CDATA[<blockquote>
<p>该项目为uniapp衍生组件库</p>
</blockquote>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[ju-image-upload]]></title>
        <id>https://vikingleo.github.io/ju-image-upload/</id>
        <link href="https://vikingleo.github.io/ju-image-upload/">
        </link>
        <updated>2021-01-06T08:32:23.000Z</updated>
        <summary type="html"><![CDATA[<h2 id="简介">简介</h2>
<p>多图上传组件，实现：</p>
<ol>
<li>按行均分显示</li>
<li>多图片上传</li>
<li>选择模式和多选模式</li>
</ol>
<h2 id="适用端">适用端</h2>
<table>
<thead>
<tr>
<th>端</th>
<th>支持</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web</td>
<td>√</td>
</tr>
<tr>
<td>微信小程序</td>
<td>√</td>
</tr>
</tbody>
</table>
<h2 id="依赖">依赖</h2>
<ol>
<li>微信公众号网页开发请自行引入<code>js-sdk</code>，并注入<code>Vue.prototype.$wx</code>，名称可自定，但要改动组件内调用的<code>$wx</code></li>
<li><code>/static</code> 自带的iconfont，也可以自行替换</li>
</ol>
<h2 id="调用">调用</h2>
<pre><code class="language-js">import ImageUpload from '@/components/ju-image-upload/ju-image-upload.vue'
export default{
	components:{
		ImageUpload
	}
}
</code></pre>
<pre><code class="language-html">&lt;image-upload 
    :src=&quot;src&quot; 
    count=&quot;2&quot; 
    text=&quot;点击就上传&quot; 
    @select=&quot;onTest&quot; 
    @cancel-select=&quot;onTest&quot; 
    @choose=&quot;onTest&quot; 
    @remove=&quot;onTest&quot; 
    @preview=&quot;onTest&quot;
    @control=&quot;onTest&quot; 
    @cancel-control=&quot;onTest&quot; /&gt;
</code></pre>
<h2 id="属性">属性</h2>
]]></summary>
        <content type="html"><![CDATA[<h2 id="简介">简介</h2>
<p>多图上传组件，实现：</p>
<ol>
<li>按行均分显示</li>
<li>多图片上传</li>
<li>选择模式和多选模式</li>
</ol>
<h2 id="适用端">适用端</h2>
<table>
<thead>
<tr>
<th>端</th>
<th>支持</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web</td>
<td>√</td>
</tr>
<tr>
<td>微信小程序</td>
<td>√</td>
</tr>
</tbody>
</table>
<h2 id="依赖">依赖</h2>
<ol>
<li>微信公众号网页开发请自行引入<code>js-sdk</code>，并注入<code>Vue.prototype.$wx</code>，名称可自定，但要改动组件内调用的<code>$wx</code></li>
<li><code>/static</code> 自带的iconfont，也可以自行替换</li>
</ol>
<h2 id="调用">调用</h2>
<pre><code class="language-js">import ImageUpload from '@/components/ju-image-upload/ju-image-upload.vue'
export default{
	components:{
		ImageUpload
	}
}
</code></pre>
<pre><code class="language-html">&lt;image-upload 
    :src=&quot;src&quot; 
    count=&quot;2&quot; 
    text=&quot;点击就上传&quot; 
    @select=&quot;onTest&quot; 
    @cancel-select=&quot;onTest&quot; 
    @choose=&quot;onTest&quot; 
    @remove=&quot;onTest&quot; 
    @preview=&quot;onTest&quot;
    @control=&quot;onTest&quot; 
    @cancel-control=&quot;onTest&quot; /&gt;
</code></pre>
<h2 id="属性">属性</h2>
<!-- more -->
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>必填</th>
<th>默认</th>
<th>可选</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>String</td>
<td>-</td>
<td>-</td>
<td>'select'</td>
<td>图片列表的类型</td>
</tr>
<tr>
<td>selectMore</td>
<td>Boolean</td>
<td>-</td>
<td>false</td>
<td>-</td>
<td>是否可多选，type=&quot;select&quot;时生效</td>
</tr>
<tr>
<td>src</td>
<td>String/Array</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>图片列表，可作为默认图片显示</td>
</tr>
<tr>
<td>rowCount</td>
<td>String/Number</td>
<td>-</td>
<td>0</td>
<td>-</td>
<td>每列显示个数（加上添加按钮），如果设置大于0，则全部变成正方形，设置的<code>height</code>和<code>width</code>无效</td>
</tr>
<tr>
<td>gutter</td>
<td>String(Number) / Number</td>
<td>-</td>
<td>10</td>
<td>-</td>
<td>两个图片框之间的间距</td>
</tr>
<tr>
<td>width</td>
<td>String</td>
<td>-</td>
<td>200rpx</td>
<td>-</td>
<td>宽度，受<code>rowCount</code>影响</td>
</tr>
<tr>
<td>height</td>
<td>String</td>
<td>-</td>
<td>200rpx</td>
<td>-</td>
<td>高度，受<code>rowCount</code>影响</td>
</tr>
<tr>
<td>icon</td>
<td>String</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>自定义添加按钮的icon，填写完整icon，例如 <code>icon=&quot;app-icon icon-home&quot;</code>，也可以加额外的class</td>
</tr>
<tr>
<td>text</td>
<td>String</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>添加按钮的文本，默认只有图标</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>String</td>
<td>-</td>
<td>'#ffffff'</td>
<td>颜色值</td>
<td>添加按钮的背景色</td>
</tr>
<tr>
<td>mode</td>
<td>String</td>
<td>-</td>
<td>'scaleToFill'</td>
<td>-</td>
<td>和uni提供的<code>image</code>的<code>mode</code>匹配</td>
</tr>
<tr>
<td>param</td>
<td>Object</td>
<td>-</td>
<td>null</td>
<td>-</td>
<td>额外参数，每个操作回调都会返回，例如form中，指明field是哪个：:param=&quot;{field:'idCard'}&quot;}</td>
</tr>
<tr>
<td>count</td>
<td>String / Number</td>
<td>1</td>
<td>-</td>
<td>1-9</td>
<td>选择图片总数,所选图片到达数量，隐藏添加按钮</td>
</tr>
<tr>
<td>chooseCount</td>
<td>String|Number</td>
<td>-</td>
<td>9</td>
<td>1-9</td>
<td>单次选择图片数量</td>
</tr>
<tr>
<td>color</td>
<td>String</td>
<td>-</td>
<td>#ccc</td>
<td>颜色值</td>
<td>添加按钮的字体颜色</td>
</tr>
<tr>
<td>upload</td>
<td>Boolean</td>
<td>-</td>
<td>false</td>
<td>-</td>
<td>自动上传到服务器，需要根据实际业务修改</td>
</tr>
<tr>
<td>uploadUrl</td>
<td>String</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>已包含我自己到上传地址，需要根据实际业务修改</td>
</tr>
</tbody>
</table>
<h2 id="事件">事件</h2>
<blockquote>
<p>所有方法会返回Object，其中包含数据的字段。</p>
</blockquote>
<h3 id="可能返回值">可能返回值</h3>
<table>
<thead>
<tr>
<th>名称</th>
<th>数据类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>param</td>
<td>Object</td>
<td>所有方法都返回。回传页面传过来的param字段，用于方法后操作</td>
</tr>
<tr>
<td>urls</td>
<td>Array</td>
<td>所有方法都返回。当前所有的图片路径</td>
</tr>
<tr>
<td>files</td>
<td>Array</td>
<td>当前选择的本地图片、serverId、localIds、tempFilePaths</td>
</tr>
<tr>
<td>current</td>
<td>String</td>
<td>当前图片地址</td>
</tr>
<tr>
<td>index</td>
<td>Number</td>
<td>当前图片在urls中都索引</td>
</tr>
</tbody>
</table>
<h3 id="方法说明">方法说明</h3>
<table>
<thead>
<tr>
<th>名称</th>
<th>返回字段（包含默认返回）</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>choose</td>
<td><code>files</code></td>
<td>选择图片后，如果用微信公众号的js-sdk，则此事件将会在<code>wx.uploadImage</code>后执行</td>
</tr>
<tr>
<td>upload</td>
<td><code>current_upload</code></td>
<td>开启自动上传时，图片上传后事件</td>
</tr>
<tr>
<td>control</td>
<td><code>current</code></td>
<td>点击单张图片弹出操作面板后的事件</td>
</tr>
<tr>
<td>cancel-control</td>
<td><code>current</code>、 <code>index</code></td>
<td>取消操作面板后</td>
</tr>
<tr>
<td>preview</td>
<td><code>current</code>、 <code>index</code></td>
<td>预览打开后</td>
</tr>
<tr>
<td>remove</td>
<td><code>current</code>、 <code>index</code></td>
<td>删除单张图片后</td>
</tr>
<tr>
<td>select</td>
<td><code>current</code>、 <code>index</code>、<code>selected</code></td>
<td>选择单张图片后</td>
</tr>
<tr>
<td>cancel-select</td>
<td><code>current</code>、 <code>index</code>、<code>selected</code></td>
<td>取消选择后</td>
</tr>
</tbody>
</table>
<h2 id="slot">slot</h2>
<p>默认slot</p>
<p><strong>注意：</strong> 设置slot时，属性<code>icon</code>和<code>text</code>无效</p>
<pre><code class="language-html">&lt;image-upload icon=&quot;app-icon icon-home&quot; text=&quot;点我上传&quot;&gt;
    &lt;!--这里带了slot，如果在此设置，则属性上的icon和text无效--&gt;
    &lt;view &gt;slot示例&lt;/view&gt;
&lt;/image-upload&gt;
</code></pre>
<h2 id="结尾">结尾</h2>
<p>工作中顺带捋出来的组件，可能有些许bug，多多包涵。</p>
<h2 id="todo">TODO</h2>
<ol>
<li>图片多选</li>
<li>选择后先展示，后上传，改动<code>upload</code>：<code>before</code> , <code>after</code> , <code>null</code></li>
</ol>
]]></content>
    </entry>
</feed>