"选择图片"组件:<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">& ...
随机推荐
- webpack,Babel,babel-loader的关系
本文将要介绍 webpack,Babel,babel-loader 的关系.理清楚他们各自做了什么事情. 通常我们新建一个项目,会先配置webpack,然后配置babel:babel是一个编译工具,实 ...
- Java 并发原子操作类(转)
转自:https://www.jianshu.com/p/3632a0f9f083 线程不安全的高并发实现 客户端模拟执行 5000 个任务,线程数量是 200,每个线程执行一次,就将 count 计 ...
- 数据结构和算法:Python实现二分查找(Binary_search)
在一个列表当中我们可以进行线性查找也可以进行二分查找,即通过不同的方法找到我们想要的数字,线性查找即按照数字从列表里一个一个从左向右查找,找到之后程序停下.而二分查找的效率往往会比线性查找更高. 一. ...
- Linux软件安装之JDK的安装
JDK的安装 1.1. 下载JDK,此处版本是1.8u131,实际操作以自己具体版本为准 先查看Linux系统是多少位(32位/64位):getconf LONG_BIT 然后去官网下载JDK [jd ...
- thinkphp 前后端分离
thinkphp 前后端分离 简单记录一下之前学习tp的历程吧. 前端HTML页面渲染 <?php namespace app\index\controller; use think\Contr ...
- Cobait Strike的socks与ew代理使用
cobait strike介绍 Cobalt Strike 一款以 metasploit 为基础的 GUI 的框架式渗透测试工具,集成了端口转发.服务扫描,自动化溢出,多模式端口监听,win exe ...
- The import org.springframework cannot be resolved
刚开始学spring框架时import org.springframework.context.support.ClassPathXmlApplicationContext;报错 我建的是maven项 ...
- mysql数据库表格之间的关系
外键 昨日内容回顾: 字段类型 约束条件 创建表的完整语法 create table 表名( 字段名 字段类型[(宽度) 约束条件], 字段名 字段类型[(宽度) 约束条件], 字段名 字段类型[(宽 ...
- laravel的中间件创建思路
网上有很多解析laravel中间件的实现原理,但是不知道有没有读者在读的时候不明白,作者是怎么想到要用array_reduce函数的? 本文从自己的角度出发,模拟了如果我是作者,我是怎么实现这个中间件 ...
- Spring05——Spring 如何实现事务管理
在此之前,我们已经了解了 Spring 相关的基础知识,今天将为给位带来,有关 Spring 事务代理的相关知识.关注我的公众号「Java面典」,每天 10:24 和你一起了解更多 Java 相关知识 ...