关键词:微擎 人人商城V3 复制到剪贴板 分组循环
1.php分组方法 这个方法可以把整体数组按照关键词字段来分开 sql不会写的用这个还是很合适的
/** * @param array $dataArr 需要分组的数组 * @param $keyStr string 分组关键字段 * @return array */ public function dataGroup(array $dataArr,$keyStr) { $newArr = []; foreach ($dataArr as $k => $val) { $newArr[$val[$keyStr]][] = $val; } return $newArr; }
因为是结合微擎的人人商城,数组分好了之后在前端用loop循环
{loop $list $index $item}
循环数据
{/loop}
这个loop我嵌套了两层,没有啥问题,$index打印出来就是索引,感觉跟foreach($list as $k=>$v)是一个意思
2.复制内容
百度了一大堆,最后用了textarea,给需要点击复制的代码给onclick到指定方法,因为我是循环嵌套的,所以需要有个参数,方法如下
function getCode(id){ var copyinput = document.getElementById("koulingContent"+id); console.log(copyinput); copyinput.select(); document.execCommand("Copy") console.log('复制'); showMB(); }
但是在移动端相当于选中了文本框的所有文字,手机键盘会弹出来,所以需要给textarea添加一个readonly属性,代表只读
<textarea readonly="readonly" style="opacity: 0; 1px;height: 1px;" id="koulingContent{$i['id']}">需要复制的内容</textarea>
千万不能给display:none的style,否则复制不会成功,网上说宽高不能为0;所以我象征性地给个地方让他透明吧(好没有存在感嘤嘤嘤~)
后端没有什么难度,因为是公司接的项目,直接就用微擎的人人商城搭建好了,但是讲道理,如果我用tp5直接开的话可能
这篇先到这里,下一篇我记录一下初接触微擎的心得。
分割线
emmmm,这个方法似乎有些手机不兼容,复制不了,有个clipboard.js可以完美兼容
开头引用3个文件
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
中间做个循环
<ul > <li v-for="(item,index) in topList" key="index"> <div class="thumb"> <img v-bind:src=item.img alt=""> </div> <div class="info"> <div class="name"><span class="save">立省<i>{{item.save}}</i></span>{{item.title}}</div> <div class="hot">{{item.hot}}</div> <div class="tag"><span>{{item.tag}}</span>仅限{{item.stock}}件</div> <div class="price"><i>¥</i>{{item.price}} <span>券后价</span> <button class="copy-btn" v-bind:data-clipboard-text="item.code">立即领券</button></div> </div> <div class="clear"></div> </li> </ul>
结尾js走一遍
clipboard.on('success', function(e) { layer.open({ skin: 'redskin' //只对该层采用myskin皮肤 ,title: false ,content: "恭喜,口令复制成功<br>请打开<font color='yellow'>手机陶宝</font>查看" }); e.clearSelection(); });
貌似是用了vue的组件,久了不看也不记得了,姑且记下来先