提交 ce53df54 编写于 作者: shutao-dc's avatar shutao-dc

删除无用代码

上级 e7b47c53
<template>
<object @init="onObjectInit" @customClick="onclick"></object>
</template>
<script lang="uts">
import { NativeButton } from "@/uni_modules/uni-native-button";
export default {
data() {
return {
button: null as NativeButton | null,
value : ""
}
},
props: {
"text": {
type: String,
default: ''
}
},
watch: {
"text": {
handler(newValue : string, oldValue : string) {
this.value = newValue
this.button?.updateText(this.value)
},
immediate: true
},
},
methods: {
onObjectInit(e : UniObjectInitEvent) {
this.button = new NativeButton(e.detail.element);
this.button?.updateText(this.value)
this.$emit("load")
},
onclick(e: UniObjectCustomEvent) {
this.$emit("buttonTap", e)
}
},
unmounted() {
// #ifdef APP-IOS
// iOS平台需要主动释放 uts 实例
this.button.destroy()
// #endif
}
}
</script>
<style>
</style>
{
"id": "uni-native-button",
"displayName": "uni-native-button",
"version": "0.0.1",
"description": "vue开发button原生组件",
"keywords": [
"tencent",
"map",
"tmap"
],
"repository": "",
"engines": {
"HBuilderX": "^4.25"
},
"dcloudext": {
"type": "uts",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "n",
"vue3": "y"
},
"App": {
"app-android": {
"minVersion": "21"
},
"app-ios": {
"minVersion": "9"
}
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "u",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
## native-button
通过 object 封装原生平台Button按钮
{
"minSdkVersion": "21"
}
\ No newline at end of file
import { Button } from "android.widget"
export class NativeButton {
$element : UniObjectElement;
constructor(element : UniObjectElement) {
this.$element = element;
bindView();
}
button : Button | null = null;
bindView() {
//通过UniElement.getAndroidActivity()获取android平台activity 用于创建view的上下文
this.button = new Button($element.getAndroidActivity()!); //构建原生view
//限制原生Button 文案描述不自动大写
this.button?.setAllCaps(false)
//监听原生Button点击事件
this.button?.setOnClickListener(_ => {
const detail = {}
//构建自定义UniObjectCustomEvent返回对象
const event = new UniObjectCustomEvent("customClick", detail)
//响应分发原生Button的点击事件
$element.dispatchEvent(event)
})
//UniObjectElement 绑定 安卓原生view
$element.bindAndroidView(button!);
}
updateText(text: string) {
//更新原生Button 文案描述
this.button?.setText(text)
}
}
import { UIButton, UIControl,ButtonType } from "UIKit"
export class NativeButton {
element : UniObjectElement;
button : UIButton;
constructor(element : UniObjectElement) {
this.element = element;
this.button = new UIButton(type=UIButton.ButtonType.system)
super.init()
// 在 swift target-action 对应的方法需要以OC的方式来调用,那么OC语言中用Selector来表示一个方法的名称(又称方法选择器),创建一个Selector可以使用 Selector("functionName") 的方式。
const method = Selector("buttonClickAction")
// button 添加点击回调
button.addTarget(this, action = method, for = UIControl.Event.touchUpInside)
this.bind();
}
// element 绑定原生view
bind() {
this.element.bindIOSView(this.button);
}
// 更新button文字
updateText(text : string) {
this.button.setTitle(text, for = UIControl.State.normal)
}
/**
* 按钮点击回调方法
* 在 swift 中,所有target-action (例如按钮的点击事件,NotificationCenter 的通知事件等)对应的 action 函数前面都要使用 @objc 进行标记。
*/
@objc buttonClickAction() {
// 发送事件
let event = new UniObjectCustomEvent("customClick")
this.element.dispatchEvent(event)
}
destroy() {
UTSiOS.destroyInstance(self)
}
}
<template>
<object class="def-picker" @init="onObjectInit" @timechanged="onTimeChanged"></object>
</template>
<script lang="uts">
import { NativeTimePicker } from "@/uni_modules/uni-time-picker";
export default {
data() {
return {
picker: null as NativeTimePicker | null,
hourValue: 0 as number,
minuteValue: 0 as number
}
},
props: {
"hour": {
type: Number,
default: 0
},
"minute": {
type: Number,
default: 0
}
},
watch: {
"hour": {
handler(newValue : number, oldValue : number) {
if (newValue < 23 && newValue >= 0) {
this.hourValue = newValue
this.picker?.setHour(this.hourValue)
}
},
immediate: true
},
"minute": {
handler(newValue : number, oldValue : number) {
if (newValue < 59 && newValue >= 0) {
this.minuteValue = newValue
this.picker?.setMinute(this.minuteValue)
}
},
immediate: true
},
},
methods: {
onObjectInit(e : UniObjectInitEvent) {
this.picker = new NativeTimePicker(e.detail.element, this.hourValue, this.minuteValue);
this.$emit("load")
},
onTimeChanged(e : UniObjectCustomEvent) {
this.$emit("changed", e)
}
},
unmounted() {
}
}
</script>
<style>
.def-picker {
min-width: 300px;
min-height: 380px;
max-width: 400px;
max-height: 400px;
}
</style>
{
"id": "uni-time-picker",
"displayName": "uni-time-picker",
"version": "1.0.0",
"description": "uni-time-picker",
"keywords": [
"uni-time-picker"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "",
"data": "",
"permissions": ""
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "u",
"aliyun": "u",
"alipay": "u"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u",
"app-uvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
# uni-time-picker
\ No newline at end of file
{
"minSdkVersion": "21"
}
\ No newline at end of file
import { TimePicker } from "android.widget"
import { View } from "android.view"
export class NativeTimePicker {
$element : UniObjectElement;
constructor(element : UniObjectElement, hour: number, minute: number) {
this.$element = element;
bindView(hour, minute);
}
picker : TimePicker | null = null;
bindView(hour: number, minute: number) {
this.picker = new TimePicker($element.getAndroidActivity()!); //构建原生view
$element.bindAndroidView(picker!);
setHour(hour)
setMinute(minute)
this.picker?.setOnTimeChangedListener((_, hourOfDay, minute) => {
const detail = {"hour": hourOfDay, "minute": minute}
const event = new UniObjectCustomEvent("timechanged", detail)
$element.dispatchEvent(event)
})
}
setHour(hour: number) {
this.picker?.setHour(hour.toInt())
}
setMinute(minute: number) {
this.picker?.setMinute(minute.toInt())
}
}
\ No newline at end of file
import { UIDatePicker, UIControl, UIDatePickerStyle } from "UIKit"
import { DateFormatter } from "CoreFoundation"
export class NativeTimePicker {
element : UniNativeViewElement
timePicker : UIDatePicker
h : number
m : number
constructor(element : UniNativeViewElement, hour : number, minute : number) {
this.element = element
this.timePicker = new UIDatePicker()
this.h = hour
this.m = minute
super.init()
// 在 swift target-action 对应的方法需要以OC的方式来调用,那么OC语言中用Selector来表示一个方法的名称(又称方法选择器),创建一个Selector可以使用 Selector("functionName") 的方式。
const method = Selector("timeChange")
// 监听时间变化回调
this.timePicker.addTarget(this, action = method, for = UIControl.Event.valueChanged)
// 设置为时间选择模式
this.timePicker.datePickerMode = UIDatePicker.Mode.time
// 设置外观样式为 wheels
if (UTSiOS.available("iOS 13.4, *")) {
this.timePicker.preferredDatePickerStyle = UIDatePickerStyle.wheels
}
this.updateTime()
this.bindView(hour, minute)
}
// element 绑定原生view
bindView(hour : number, minute : number) {
this.element.bindIOSView(this.timePicker);
}
// 设置时
setHour(hour : number) {
this.h = hour
this.updateTime()
}
// 设置分
setMinute(minute : number) {
this.m = minute
this.updateTime()
}
updateTime() {
let formatter = DateFormatter()
formatter.dateFormat = "HH:mm"
let date = formatter.date(from = `${this.h}:${this.m}`)
if (date != null) {
this.timePicker.date = date!
}
}
/**
* 按钮点击回调方法
* 在 swift 中,所有target-action (例如按钮的点击事件,NotificationCenter 的通知事件等)对应的 action 函数前面都要使用 @objc 进行标记。
*/
@objc timeChange() {
// 发送事件
console.log("timeChange")
let formatter = DateFormatter()
formatter.dateFormat = "HH"
let hourString = formatter.string(from = this.timePicker.date)
formatter.dateFormat = "mm"
let minuteString = formatter.string(from = this.timePicker.date)
const detail = { "hour": hourString, "minute": minuteString }
const event = new UniObjectCustomEvent("timechanged", detail)
this.element.dispatchEvent(event)
}
destroy() {
UTSiOS.destroyInstance(self)
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册