"选择图片"组件:<pickimage> —— 快应用组件库H-UI

<import name="pickimage" src="../Common/ui/h-ui/media/c_pickimage"></import>
<template>
<div class="container">
<pickimage></pickimage>
</div>
</template>
<style lang="less">
@import '../Common/styles/container.less';
</style>

<import name="pickimage" src="../Common/ui/h-ui/media/c_pickimage"></import>
<template>
<div class="container">
<pickimage size="100" color="danger"></pickimage>
</div>
</template>
<style lang="less">
@import '../Common/styles/container.less';
</style>




<import name="pickimage" src="../Common/ui/h-ui/media/c_pickimage"></import>
<template>
<div class="container">
<pickimage id="pick"></pickimage>
<image src="{{pictureUrl}}"></image>
</div>
</template>
<style lang="less">
@import '../Common/styles/container.less';
</style>
<script>
export default {
private: {
pictureUrl:'',
onInit() {
this.$on('pick_dispatchEvt',this.dispatchEvt)
},
dispatchEvt(evt) {
this.pictureUrl = evt.detail.pictureUrl
}
}
</script>
扫码体验

"选择图片"组件:<pickimage> —— 快应用组件库H-UI的更多相关文章
- "Tag标签"组件:<tags> —— 快应用组件库H-UI
 <import name="tags" src="../Common/ui/h-ui/text/c_tags"></import> ...
- "图片组件"组件:<pic> —— 快应用组件库H-UI
 <import name="pic" src="../Common/ui/h-ui/media/c_pic"></import> & ...
- "多行文本"组件:<multi> —— 快应用组件库H-UI
 <import name="multi" src="../Common/ui/h-ui/text/c_text_multi"></impo ...
- "段落"组件:<p> —— 快应用组件库H-UI
 <import name="p" src="../Common/ui/h-ui/text/c_p"></import> <te ...
- "浮动按钮"组件:<fab> —— 快应用组件库H-UI
    <import name="fab" src="../Common/ui/h-ui/basic/c_fab"></import ...
- 【ARK UI】HarmonyOS 从相册选择图片并显示到Image组件上
参考资料 [Harmony OS][ARK UI]ETS 上下文基本操作 [Harmony OS][ARK UI]ets使用startAbility或startAbilityForResult方式 ...
- "首字母变大写"组件:<capitalize> —— 快应用组件库H-UI
 <import name="capitalize" src="../Common/ui/h-ui/text/c_text_capitalize"> ...
- "字符反向拼接"组件:<reverse> —— 快应用组件库H-UI
 <import name="reverse" src="../Common/ui/h-ui/text/c_text_reverse"></ ...
- "字母全变小写"组件:<lowercase> —— 快应用组件库H-UI
 <import name="lowercase" src="../Common/ui/h-ui/text/c_text_lowercase">& ...
随机推荐
- 微信小程序修改request合法域名不生效及解决方法
在小程序微信公众平台修改后请求,依然在console中显示修改前的域名. 解决:在小程序开发者工具中点击“详情”后点击“域名信息”,就会自动刷新
- 如何将自己的测试脚本分离成PO模式的测试框架
1 PO模式 1.1 PO模式介绍 Page Object Model 测试页面和测试脚本分离,即页面封装成类,供测试脚本调用. (将项目分为page.py和test.py) 测试用例:就是excel ...
- HTML节点操作
HTML节点操作 HTML节点的基本操作,添加节点,替换节点,删除节点,绑定事件,访问子节点,访问父节点,访问兄弟节点. 文档对象模型Document Object Model,简称DOM,是W3C组 ...
- 【i春秋 综合渗透训练】渗透测试笔记
网站是齐博CMS V7.0 1.要求获得管理员密码: 利用齐博CMS V7.0 SQL爆破注入漏洞即可得到管理员用户名密码 https://www.cnblogs.com/vspid ...
- 图-搜索-DFS-37. 解数独
2020-03-24 22:23:32 问题描述: 编写一个程序,通过已填充的空格来解决数独问题. 一个数独的解法需遵循如下规则: 数字 1-9 在每一行只能出现一次.数字 1-9 在每一列只能出现一 ...
- MySQL datetime类型详解
研发反馈问题,数据库中datetime数据类型存储的值末尾会因四舍五入出现不一致数据,影响查询结果,比如:程序中自动获取带毫秒精度的日期'2019-03-05 01:53:55.63',存入数据库后变 ...
- Kullback-Leibler(KL)散度介绍
在这篇文章中,我们将探讨一种比较两个概率分布的方法,称为Kullback-Leibler散度(通常简称为KL散度).通常在概率和统计中,我们会用更简单的近似分布来代替观察到的数据或复杂的分布.KL散度 ...
- OpenCV-Python 图像阈值 | 十五
目标 在本教程中,您将学习简单阈值,自适应阈值和Otsu阈值. 你将学习函数cv.threshold和cv.adaptiveThreshold. 简单阈值 在这里,问题直截了当.对于每个像素,应用相同 ...
- PyTorch专栏(一)
专栏目录: 第一章:PyTorch之简介与下载 PyTorch简介 PyTorch环境搭建 第二章:PyTorch之60min入门 PyTorch 入门 PyTorch 自动微分 PyTorch 神经 ...
- WePY框架 input,checkbox-group,radio-group等change 一般处理方法
布局搞定了,接下来就是数据处理方面了 form表单中常用标签,绑定change方法: 方法的具体实现 根据打印出来e的结果可以看到,e指代当前标签对象,包含属性方法等 从detail中可以获取多选框选 ...